I pieced together a hover-drop-menu derived from
htmldog.com/articles/suckerfish/dropdowns with the colour-by-URL modifier
script solution as posted by Rob earlier.
The new styles basically removes the sub-listed items from view, leaving
only the first LI of the <ul class="head low"> visible until mouse hovers
over it, to bring its sub-points back into view.
The background colour works for the LI's on top, which are always visible,
but not for the sub-points for some reason.
Although font styles do take effect across a complete lists, for example: ..
..high {background-color: #99FFCC; font-size:80%;}
... makes a smaller font on all items in the group containing current URL.
Anyone has any idea why the background colours doesn't take effect behind
the sub-points?
See complete page below:
<html><head><title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#menu, #menu ul {
padding: 0;
margin: 0;
list-style:none;
}
#menu a {
display: block:
width: 10em:
}
#menu ul {
float: left;
width: 10em;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
}
#menu li:hover ul {
left: auto;
}
#menu li:hover ul{
left: auto;
}
#menu li.sfhover ul{ /* ie specific, but alignment not yet working */
left: auto;
margin-top:1em;margin-left:-1em;
}
..high {background-color: #99FFCC; font-size:80%;}
..low {background-color: #33CC00;}
</style>
<script type="text/javascript">
function doClass(){
var As, ff, x;
var a = RegExp('.*/'); // Needed many times, compile for speed
var f = document.URL.replace(a,''); // filename of current page
var d = document.getElementById('menu');
var uls = d.getElementsByTagName('ul');
for (var i=0, j=uls.length; i<j; i++){
x = uls[i];
// If the UL className string includes word 'head'
if ( /\bhead\b/.test(x.className) ){
// Get its A elements
As = x.getElementsByTagName('a');
// Search for matching file names
for (var k=0, m=As.length; k<m; k++) {
ff = As[k].href.replace(a,'');
// If match, modify the className string of the parent UL
if ( ff == f ){
x.className = x.className.replace(/\blow\b/,'high');
// No need to continue once we've found one
return;
}
}
}
}
}
</script>
<script language="javascript">
/* the suckerfish script to fix IE compatibility in bringing the sub-menu
items back in view, although not as intended directly under its headings */
sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagNa me("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body onload="doClass();">
<div id="menu">
<ul class="head low">
<li><a href="z0.html">Flora & puna</a>
<ul class="sub">
<li><a href="z1.html">Pretty flowers</a></li>
<li><a href="z2.html">Deadly vines</a></li>
</ul>
</li>
</ul>
<ul class="head low">
<li><a href="z3.html">Aquatic creatures</a>
<ul class="sub">
<li><a href="z4.html">Pretty fish</a></li>
<li><a href="z5.html">Don't eat</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
--
One way to make your old car run better is to look up the price of a
new model.
Similar Threads
