Submit your widget

Professional dropdown menu navigation

Created 13 years ago   Views 8593   downloads 2614    Author n/a
Professional dropdown menu navigation
View DemoDownload
104
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);