|
Posted by Vladdy on 10/23/05 05:37
windandwaves wrote:
> 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
>
>
Why make real browsers waste the bandwidth by downloading IE only code:
http://www.vladdy.net/demos/iepseudoclassesfix.html
and when applied to navigation:
http://www.vladdy.net/demos/cssnav.html
--
Vladdy
http://www.klproductions.com
Navigation:
[Reply to this message]
|