multi level menu - highlight menu item and submenu on click

jasonc · 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>

ignace · 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);
}

Sign In

multi level menu - highlight menu item and submenu on click

Recommended Posts

jasonc

Link to comment

Share on other sites

ignace

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information