Flexible navigation example

The JavaScript

All the JavaScript does is go through the list and make sure that when the mouse is inside the LI, it adds the class "over" to the LI - unless there is already a class on it. When the mouse leaves the LI, the script removes the class unless there is already the class "cur" applied.

(This example uses oldschool DOM-1 event calls, feel free to replace them with more modern addEvent calls, but I'd wait for the result of the recoding contest)


function rollover()
{
  if(!document.getElementById || !document.createTextNode){return;}
  var n=document.getElementById('nav');
  if(!n){return;}
  var lis=n.getElementsByTagName('li');
  for (var i=0;i<lis.length;i++)
  {
    lis[i].onmouseover=function()
    {
      this.className=this.className?'cur':'over';
    }
    lis[i].onmouseout=function()
    {
       this.className=this.className=='cur'?'cur':'';
    }
  }
}
window.onload=rollover;

Previous: The CSS | Start | Next: That's all