|
|
Posted by windandwaves on 10/22/05 06:19
dorayme wrote:
>> From: "windandwaves" <winandwaves@coldmail.com>
>>
>> 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.
>>
>
>
> I find it simpler (when even simpler won't do) to work with
> something like the one at http://dorayme.150m.com/test/nav.html
>
> (Which I have been adapting from where I found it, via alt.htm I
> think, for various things lately). It seems to work well, no
> fancy scripting...
That is great, so you do the following:
1. change a tag from inline element to block element
2. set a tag's width to auto
3. use a:hover to show the hover effect
I guess that is even smarter ;-)
Thank you for that.
[Back to original message]
|