...

View Full Version : multi level menu - highlight menu item and submenu on click



jasonpc1
05-10-2010, 08:02 AM
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>

effpeetee
05-10-2010, 12:29 PM
This site may help you. (http://www.mardiros.net/liquid-css-layouts.html)

Many more useful links here (http://www.exitfegs.co.uk/Sources.html).

Use the search box.


Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum