|
Posted by Evertjan. on 10/24/05 14:42
windandwaves wrote on 22 okt 2005 in comp.lang.javascript:
> 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;
'this' would refer here to the window, I think.
> lis[i].onmouseover=function() {this.className = ulname + "ie";}
> lis[i].onmouseout=function() {this.className = oldClassName;}
> }
> }
>}
try, [if you don't like the css a:hover]:
===================================
<style>
ul li {width:200px;text-align:center;}
..cNormal a {background-color:yellow;color:red;}
..cHover a {background-color:red;color:yellow;}
..cNormal {border:navy 3px dotted;background-color:#eee;}
..cHover {border:green 3px solid;background-color:#bbb;}
</style>
<script type="text/javascript">
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++) {
lis[i].className = 'cNormal'
lis[i].onmouseover=function() {this.className = 'cHover';}
lis[i].onmouseout=function() {this.className = 'cNormal';}
}
}
}
</script>
<body onload="hoverer('menu');">
<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>
===================================
--
Evertjan.
The Netherlands.
(Replace all crosses with dots in my emailaddress)
[Back to original message]
|