Adding additional behaviour to IE - LI Hover/Rollover
Most of the time, it is good practice to create lists using the UL/OL HTML tags so that their structure is represented in HTML (important). We are also incouraged to use nested UL/OL to display Hierarchy between the elements. A ‘no better’ example to this is either a site navigation, or a sitemap.
You HTML should form something similar to below:
- About Us
- Our Business
- Our People
- Products
- Product ABC
- Product XYZ
- Services
- Full List
- Contact
- Sitemap
This way your navigation already indicates the hierarchy of information using the LIST elements.
Now that we have created a nice hierarchal menu, we want to be able to have rollovers and cool effects, because the designer always have cool effects. Usually using A:Hover will be enough, but definately is not suitable for more complex lists.
Natively, MSIE 6 does not support the behaviour for LI Hover. There are some suitable hacks out there which help us add this behaviour by including them in the header of your page. One examples of adding this behaviour to other elements in MSIE is documented here at XS4ALL. But is this really compliant? What about earlier versions of IE? And what happens to Mac IE?
This method works by adding a .htc file to your website you can refer to it by including a reference in your IE header section body { behavior:url(”Hovers.htc”); }
Therefore all your styling is done in style sheets (Our aim). This behaviour can also be applied to TR, TD or whatever you require.
I have seen this used with my favourite little navigation code written by Aleksandar Vacić (A+) and can be found here.
htc is a great, but please note it is by no means standards compliant. A simple alternative is to use javascript to filter through the list and apply mouseover and mouseout events to the individual list items. Obviously this will require a javascript enabled browser. Below is an example of such a javascript used in Dan Webb and Patrick Griffith’s Suckerfish menu.
sfHover = function() {
var sfEls = document.getElementById(”nav”).getElementsByTagName(”LI”);
for (var i=0; i
sfEls[i].onmouseover=function() {
this.className+=” sfhover”;
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(” sfhover\\b”), “”);
}
}
}
if (window.attachEvent) window.attachEvent(”onload”, sfHover);
NB: Although IE has troubles with the hover behaviour most modern browsers such as Mozilla, Opera and Safari support :hover, :active and :focus on lists - as the standards intended.
Comment by Richard Lee — March 27, 2006 @ 5:35 pm