Submit your widget

Professional dropdown menu navigation

Created 14 years ago   Views 8741   downloads 2687    Author n/a
Professional dropdown menu navigation
View DemoDownload
106
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);