Mon, 2005-03-07 06:37
hi,
I have made a menu based on the suckerfish dropdown model at this url:
http://www.htmldog.com/articles/suckerfish/dropdowns/
it looks really good but one little thing I want is the sub-menu li parent element to stay highlighted, while you are hovering within the child element.
his fancy version and example is this:
http://www.htmldog.com/articles/suckerfish/dropdowns/example/
but I can't tell what is making this work?
is it the javascript that is making this happen? or is it just a class that I am missing in my menu?
cheers for any advice!
Mon, 2005-03-07 07:13
#1
submenu parent to highlight?
[post edited as I think it was too long and scaring people :shock:]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>dropdown nav</title>
<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("carsLeftNav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+="over";
}
node.onmouseout=function() {
this.className=this.className.replace("over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>
<style type="text/css">
/* main menu */
#leftNav ul {
margin: 0;
padding: 0;
list-style: none;
width: 140px;
border-bottom: 1px solid #000;
}
#leftNav ul li { position: relative; }
/* sub-menus */
ul.sub {
position: absolute;
left: 139px;
top: 0;
display: none;
}
#leftNav li a {
display: block;
text-decoration: none;
color: #fff;
font: bold 11px verdana, san-serif;
background: #ED1C24; /* must state bg - IE 6 bug */
padding: 2px 4px;
border: 1px solid #000;
border-bottom: 0;
}
#leftNav li a.parent { background: #ed1c24 url(white_arrow_bg.gif) no-repeat 128px 0; }
#leftNav li a:hover { background: #f68e92; }
#leftNav li a:hover.parent { background: #F68E92 url(white_arrow_bg.gif) no-repeat 128px 0; }
/* fix ie hide from ie mac \*/
* html #leftNav ul li { float: left; }
* html #leftNav ul li a { height: 1%; }
/* fix ie end */
#leftNav li:hover ul, #leftNav li.over ul { display: block; }
</style>
</head>
<body>
<div id="leftNav">
<ul id="carsLeftNav">
<li><a href="#">Home</a></li>
<li><a href="#" class="parent">Other Vehicle</a>
<ul class="sub">
<li><a href="#">Caravan</a></li>
<li><a href="#">General</a></li>
</ul>
<li><a href="#">Sell Your Car</a></li>
<li><a href="#" class="parent">Research Cars</a>
<ul class="sub">
<li><a href="#">Research your Car</a></li>
<li><a href="#">Value your Car</a></li>
<li><a href="#">Buyer Toolkit</a></li>
</ul>
<li><a href="#" class="parent">News & Reviews</a>
<ul class="sub">
<li><a href="#">Top Stories</a></li>
<li><a href="#">Road Tests</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Mon, 2005-03-07 08:01
#2
submenu parent to highlight?
sorry for the 'post-to-myself' thing, but I am giving up for now and thought I would update my progress.
I have figured out it's not the javascript as if you remove it all the action still works in firefox.
I figure it's a sort of cascading of the hover class through the <li>'s, but I still can't figure out how to get mine working...
time for bed to rest these strained eyes.
Tue, 2005-03-08 08:45
#3
submenu parent to highlight?
arrrrrrrrgh! still stuck on this one.... looks like I might try rebuilding the fancy version from scratch as I have no clue how to achieve this so far...
seems like it would be simple but sometimes not so.
any advice before I go back to the drawing board? :?
Tue, 2005-03-08 12:37
#4
submenu parent to highlight?
this style entry is doing the highlighting.
#nav li:hover, #nav li.sfhover {
background: #eda;
}
IE doesn't support :hover on any element bar <a>. The javascript is used to give IE onmouseover eventhandlers that duplicate :hover functionality for non <a> elements.