|
Posted by windandwaves on 10/22/05 04:35
Hi Folk
Just a bit of help here for newbies who want their menus to look nicer.
I am sure that many of you make menus like this
<ul id="menu">
<li><a href="page1.html">option 1</a></li>
<li><a href="page2.html">option 2</a></li>
<li><a href="page3.html">option 3</a></li>
<li><a href="page4.html">option 4</a></li>
</ul>
and then add style like this
#menu li:hover {background-color: #123456;}
Below is a little function I "developed" (stole, copied and adapted) that
can create this hover effect in IE.
To make it work, write the body tag as follows:
<body onload="hoverer('menu');">
function hoverer(ulname) {
if (document.all && document.getElementById(ulname).currentStyle ) {
var navroot = document.getElementById(ulname);
var lis=navroot.getElementsByTagName("li");
for (i=0; i<lis.length; i++) {
var oldClassName = this.className;
lis[i].onmouseover=function() {this.className = ulname + "ie";}
lis[i].onmouseout=function() {this.className = oldClassName;}
}
}
}
any comments / questions greatly appreciated.
- Nicolaas
Navigation:
[Reply to this message]
|