横向和纵向的下拉菜单第二种实现办法及显示效果

下载:pro_dropdown_2.zip (7.98 kb)

下面的是引用官方的说明:

Information

The second menu in this series using my javascript routine to write the IE5.5 and IE6 specific styles for us and monitor the mouse hover states.

As with the first dropdown menu, if you examine the stylesheet you will only see the li:hover styling.

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. This is a little long winded but necessary as IE5.5 and IE6 do not understand the child selector.

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);

Tested in IE5.5, IE6, IE7, Firefox, Opera, Netscape, Mozilla, Safari (PC) and Safari (iPod Touch).

Download

All the files, except the photograph which is copyrighted, can be downloaded using the link below. If you are going to use this in your website then please respect my copyright and keep the credits in the stylesheets and javascript.

Download pro_dropdown_2.zip