Below dropmenu and javascript modifies ul properties depending on if a link
within matches the current url.
If a match is found the .high style applies to the relevant section, or .low
if no match is found.
This works only for static list, or in the case of a dropmenu, with the
first visible link of each UL only, as tested on Konqueror and Mozilla.
When "position: absolute" is used in conjuction with removing the items from
the page the background-color is gone as they are brought back with the
"left: auto" for some reason, although not other values such as font-size.
Does anyone know why and how to keep the background-color value?
<style type="text/css">
..high {background-color: #99FFCC; font-size: 80%;}
..low {background-color: #33CC00; font-size: 80%;}
..head, .head ul, .low ul {
padding: 0;
margin: 0;
list-style: none;
}
#menu a {
display: block;
width: 10em;
}
..head, .low {
float: left;
width: 10em;
}
..head li ul, .low li ul {
position: absolute;
width: 10em;
left: -999em;
}
..head li:hover ul, low li:hover {
left: auto;
}
</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) ){
/* note: add forward slashes around "\bhead\b" if removed by newsreader */
// 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>
</head>
<body onload="doClass();">
<div id="menu">
<ul class="head low">
<li><a href="z0.html">Flora & funa</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>
<div style="clear:left">
"To vacillate or not to vacillate, that is the question ... or is it?"
</div>
