list item (li) hover effect in IE

W

windandwaves

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.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.

- Nicolaas
 
D

dorayme

From: "windandwaves said:
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.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.
Click to expand...



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...
 
N

Neredbojias

With neither quill nor qualm, windandwaves quothed:
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.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.

- Nicolaas
Click to expand...


That's great but if you need javascript, why not just use onmouseover?
 
W

windandwaves

dorayme said:
From: "windandwaves" <[email protected]>

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.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.
Click to expand...



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...
Click to expand...


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.
 
W

windandwaves

Neredbojias said:
With neither quill nor qualm, windandwaves quothed:
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.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.

- Nicolaas
Click to expand...


That's great but if you need javascript, why not just use onmouseover?
Click to expand...


The reason I used the javascript is because if you have a really long menu,
it keeps the html clean (without any mouseovers).

Having said that, I am now using dorayme's solution, because it seems a lot
smarter again!

Thank you

- Nicolaas
 
R

Randy Webb

Neredbojias said the following on 10/21/2005 11:17 PM:
With neither quill nor qualm, windandwaves quothed:
lis.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.

- Nicolaas
Click to expand...



That's great but if you need javascript, why not just use onmouseover?
Click to expand...


It does use onmouseover/out, it just adds them dynamically.
 
D

Dan

windandwaves said:
Below is a little function I "developed" (stole, copied and adapted) that
can create this hover effect in IE.
Click to expand...

And what does it do for people who use other, better, browsers?
 
J

Jonathan N. Little

Dan said:
And what does it do for people who use other, better, browsers?
Click to expand...
Nothing, he filters them out with a browser test at the start of the
function

if (document.all && document.getElementById(ulname).currentStyle ) {

since they do not need the JavaScript hack...
 
T

Thomas 'PointedEars' Lahn

Dan said:
^^^^^^^^^^^^^^^^^
And what does it do for people who use other, better, browsers?
Click to expand...

With them, the CSS rule included in the posting will suffice :)


PointedEars
 
D

Duncan Booth

windandwaves said:
<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.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.
Click to expand...


You could avoid multiple calls of getElementById by moving the declaration
of navroot outside the if statement.

You shouldn't use a global variable as the loop counter. This is likely to
lead to subtle errors.

The line 'var oldClassName = this.className' is a loop invariant, so you
might as well move it outside the loop. The functions you define don't vary
either, so those can be moved out as well.

The onmouseout function is setting the li element's classname to the body's
classname which probably isn't what you intended.

A better way to do this is to use the fact that an element can have
multiple classes. e.g.

function hoverer(ulname) {
function mouseOver() {
this.className += ' hover';
}
function mouseOut() {
this.className = this.className.replace(/ *hover\b/g, '');
}
var navroot = document.getElementById &&
document.getElementById(ulname);
if (document.all && navroot && navroot.currentStyle ) {
var navroot = document.getElementById(ulname);
var lis=navroot.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis.onmouseover=mouseOver;
lis.onmouseout=mouseOut;
}
}
}

Then your style rules can do things like:

#menu li.hover, #menu li:hover {
background-color: #123456;
}

One other point to consider is that you might want to attach other
mouse over/mouse out event handlers directly to list elements, so it might
be better to use the 'attachEvent' method to add an additional handler and
not interfere with existing handlers. If you do this though it gets a bit
more complicated as you can't just use 'this' to access the list element.
 
W

windandwaves

Duncan said:
windandwaves said:
<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.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.
Click to expand...


You could avoid multiple calls of getElementById by moving the
declaration of navroot outside the if statement.

You shouldn't use a global variable as the loop counter. This is
likely to lead to subtle errors.

The line 'var oldClassName = this.className' is a loop invariant, so
you might as well move it outside the loop. The functions you define
don't vary either, so those can be moved out as well.

The onmouseout function is setting the li element's classname to the
body's classname which probably isn't what you intended.

A better way to do this is to use the fact that an element can have
multiple classes. e.g.

function hoverer(ulname) {
function mouseOver() {
this.className += ' hover';
}
function mouseOut() {
this.className = this.className.replace(/ *hover\b/g, '');
}
var navroot = document.getElementById &&
document.getElementById(ulname);
if (document.all && navroot && navroot.currentStyle ) {
var navroot = document.getElementById(ulname);
var lis=navroot.getElementsByTagName("li");
for (var i=0; i<lis.length; i++) {
lis.onmouseover=mouseOver;
lis.onmouseout=mouseOut;
}
}
}
Click to expand...


Thank you for that. That is awesome.
 
V

Vladdy

windandwaves said:
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.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
}
}
}

any comments / questions greatly appreciated.

- Nicolaas
Click to expand...

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
 
M

Mellow Crow

windandwaves said:
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.
Click to expand...
[snip]

why not the following?

#menu a:hover {background-color: #123456;}
 
W

windandwaves

Mellow Crow wrote:
[snip]
#menu a:hover {background-color: #123456;}
Click to expand...

Yes, that is what I ended up using. It worked fine for this situation, but
it will not work in all situations. Have a look at some of the other
responses, there are actually some cool ways out there to solve it.

Thank you.

- Nicolaas
 
M

Mellow Crow

windandwaves said:
Mellow Crow wrote:
[snip]
#menu a:hover {background-color: #123456;}
Click to expand...

Yes, that is what I ended up using. It worked fine for this
situation, but it will not work in all situations. Have a look at
some of the other responses, there are actually some cool ways out
there to solve it.
Click to expand...

It's informative know there was no objection to a:hover in this case. Thank
you.
 
E

Evertjan.

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;
Click to expand...

'this' would refer here to the window, I think.
lis.onmouseover=function() {this.className = ulname + "ie";}
lis.onmouseout=function() {this.className = oldClassName;}
Click to expand...

}
}
}
Click to expand...

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.className = 'cNormal'
lis.onmouseover=function() {this.className = 'cHover';}
lis.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>
===================================
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Align separate li to right 2
Multi select options in a menu 1
Dropdown menu in a fixed navbar 2
Working on mobile css menu with plenty of frustration! 2
Only one table shows up with the information 2
Javascript scroll to sections and also scroll to section but open relevant nav-tab 4
Align img inside nav tabs section 5
Song requests 4

Members online

No members online now.
Total: 53 (members: 1, guests: 52)
Robots: 480

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,812
Latest member
GracielaWa

Latest Threads

Top