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

by 清泉 7. 九月 2008 08:08

这个是转官方网站:http://www.stunicholls.com/menu/pro_dropdown_2.html
这个可以说是一种无限级下拉菜单,在里面添加<ul></ul>里面继续添加就可以,很容易实现的.
不过.这个只提供了一种样式.如果想修改样式,对美工还有有点要求的.不然改起来不漂亮.
这个效果我是不敢用.因为我美工不好.修改试了一被.结果被我改的很难看.那个就不拿出来现了.
还是给出官方的演示效果.附件里面有这个下拉菜单的使用范例,里面也有详细的使用说明.

  

下载: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

Tags: , , ,

JS相关技术

添加评论



(将显示你的Gravatar头像)  

biuquote
微笑得意调皮害羞酷大笑惊讶发呆喜欢可怜尴尬闭嘴噘嘴皱眉伤心抓狂呕吐坏笑漫骂发怒
Loading



Supidea.com 晨飞的梦 @ All Rights Reserved. Powered by BlogYi.NET ver:1.8.0.0. 苏ICP备09011404号

关于博主

kamau
抱着美好的理想背井离乡,这酸甜苦辣只能默默忍受。既然选择了路,就得风雨兼程……

Calendar

<<  二月 2012  >>
303112345
6789101112
13141516171819
20212223242526
2728291234
567891011

在日历中查看文章

最近的评论

Comment RSS

声明

      本博所发一切破解相关附件只作学习研究交流之用,严禁用于商业用途,请在下载24小时内删除。
      本博所有网友评论不代表本博立场,版权归其作者所有。

© Copyright 2009