jasonc Posted May 10, 2010 Share Posted May 10, 2010 I have a menu with a sub menu. all menu items have the same background image when an item is click the background changes to the menubutton-active background when someone hovers over this item there is an menubutton-active:hover background when someone clicks a sub menu item the fist click menu stays the same background and the sub item has yet another background 'SUBmenubutton' and like above when hovered over it has a new background 'SUBmenubutton:hover' but for some reason i can not figure out how to do this. i previously had this all working in tables and have moved over to CSS but can not get the same results. here is my non working css version... what i would like is to do away with the tables completely <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> *{ margin:0; padding:0; } body { background: #fff; } #wrap { width: 99%; margin: 0 auto; min-width: 700px; } #header { height: 60px; padding: 0px 5px 3px 10px; background: #7AB3D2; font-style: italic; font-size: 3em; font-family: Blackadder ITC;} #menu { list-style: none; background: #7AB3D2; padding: 10px; float: left; width: 155px; } /* the width here should be 20 less than the width in the content */ #menu li a { display: block; padding: 3px 0px 3px 0px; margin: 5px 0 5px 0; background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-decoration: none; text-align: center; } #menu li a:hover { display: block; padding: 3px 0px 3px 0px; margin: 5px 0 5px 0; background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-decoration: none; text-align: center; } menubutton { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } menubutton:hover { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } menubutton-active { background: url(images/menubutton_h.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } menubutton-active:hover { background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } div.menuindent { margin: 0px 0px 0px 4px; } SUBmenubutton { background: url(images/SUBmenubut ton.gif); background-repeat: no-repeat; background-position: center center; } SUBmenubutton:hover { background: url(images/SUBmenubutton_h.gif); background-repeat: no-repeat; background-position: center center; } SUBmenubutton-active { background: url(images/SUBmenubutton_h.gif); background-repeat: no-repeat; background-position: center center; } SUBmenubutton-active:hover { background: url(images/SUBmenubutton.gif); background-repeat: no-repeat; background-position: center center; } a.one { color: #fff; text-decoration: none; } td a.one { display:block; height:100%; } </style> </head> <body> <ul id="menu"> <li><a href="?ac=item1" class="one">item1</a></li> <? if ($_GET['ac'] == "item1") { ?> <table> <tr> <td align="left" valign="top" <? if ($_GET['ac'] == "item1") { ?>class="SUBmenubutton-active"<? } else { ?>class="SUBmenubutton"<? } ?>> <div class="menuindent"> <? if ($_GET['i'] != '1') {?><a href="?ac=item1&i=1" class="menu"><? }?>item1-1<? if ($_GET['i'] != '1') {?></a><? }?> </div> </td> </tr> </table> <? } ?> <li><a href="?ac=item2" class="one">item 2</a></li> <? if ($_GET['ac'] == "item2") { ?> <table> <tr> <td align="left" valign="top" <? if ($_GET['ac'] == "item2") { ?>class="SUBmenubutton-active"<? } else { ?>class="SUBmenubutton"<? } ?>> <div class="menuindent"> <? if ($_GET['i'] != '1') {?><a href="?ac=item2&i=1" class="menu"><? }?>item2-1<? if ($_GET['i'] != '1') {?></a><? }?> </div> </td> </tr> </table> <? } ?> </ul> </body> </html> Quote Link to comment https://forums.phpfreaks.com/topic/201229-multi-level-menu-highlight-menu-item-and-submenu-on-click/ Share on other sites More sharing options...
ignace Posted May 10, 2010 Share Posted May 10, 2010 Here's an example of how you would normally do it, fill in accordingly. Please note, extra style-rules may be required. <div id="menu"> <ul> <li><a href="#">Item #1</a> <ul> <li><a href="#">Item #1.1</a></li> </ul> </li> <li><a href="#">Item #2</a> <ul> <li><a href="#">Item #2.1</li> </ul> </li> </ul> </div> #menu li a { display: block; background-image: url(path/to/image.fig); } #menu li a:hover { background-image: url(path/to/image-hover.fig); } /** SUB-ITEM *************************************/ #menu li li a { background-image: url(path/to/alt/image.fig); } #menu li li a:hover { background-image: url(path/to/alt/image-hover.fig); } Quote Link to comment https://forums.phpfreaks.com/topic/201229-multi-level-menu-highlight-menu-item-and-submenu-on-click/#findComment-1055758 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.