Submit your widget
HomeMenu & NavigationProfessional dropdown menu navigation

Professional dropdown menu navigation

Created 14 years ago   Views 8789   downloads 2719    Author n/a
Professional dropdown menu navigation
View DemoDownload
107
Share |

The menu in this series using javascript to write the  mouse hover states.

This menu also styles the path taken through the menu so that it works in IE5.x and IE6 as well as IE7 and all other browsers.

The javascript

 

* Credits: Stu Nicholls */
/* URL: http://www.stunicholls.com/menu/pro_dropdown_2/stuHover.js */

stuHover = function() {
 var cssRule;
 var newSelector;
 for (var i = 0; i < document.styleSheets.length; i++)
  for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
   {
   cssRule = document.styleSheets[i].rules[x];
   if (cssRule.selectorText.indexOf("LI:hover") >= 0)
   {
     newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
    document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
   }
  }
 var getElm = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<getElm.length; i++) {
  getElm[i].onmouseover=function() {
   this.className+=" iehover";
  }
  getElm[i].onmouseout=function() {
   this.className=this.className.replace(new RegExp(" iehover\\b"), "");
  }
 }
}
if (window.attachEvent) window.attachEvent("onload", stuHover);

You might also like