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

Join the conversation

Browse

Activity

Important Information