Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    417
    Thanks
    4
    Thanked 1 Time in 1 Post

    multi level menu - highlight menu item and submenu on click

    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

    Code:
    <!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>

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This site may help you.

    Many more useful links here.

    Use the search box.


    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •