水平方向的PopMenu-弹出菜单(DIV+CSS+JS)

来源:互联网 发布:mac下载的软件不见了 编辑:程序博客网 时间:2024/04/28 21:20

此POPMENU根据alistapart的articles改编,比DW中用显示、隐藏层的方法要简单。在IE6.0 IE5.X Firefox NS都能正确显示,只用到很少的JS代码,使用时只要把<ul></ul>部分插入需要的地方即可,不会因分辨率不同而发生错位的现象。菜单演示>>

CSS代码
li ul {display: none;left: -40px;position: absolute;top: 24px;width: 490px; /*opera需要这个宽度,可根据导航条的实际宽度作调整*/}li ul li{display: inline;}li ul li a{background: url(h_line.gif) no-repeat 0px 7px;color: #666666;font-weight: normal;padding: 6px;text-align: left;}li ul li a:hover{background: url(h_line.gif) no-repeat 0px 7px;color: #DC4E1B;text-decoration: underline;}li ul,li ul li{border: 0px;}li:hover ul, li.over ul,ul li:hover {display: block;}ul {list-style: none;margin: 0px;padding: 0px;font: normal 11px verdana;}ul li {border: solid 1px #CCCCCC;border-left: 0px;float: left;position: relative;}ul li a {background: #F5F5F5;color: #666666;display: block;font-weight: bold;padding: 5px 10px;text-align: center;text-decoration: none;}ul li a:hover {background: #DC4E1B;color: #FFFFFF;}.left{height: 24px;width: 1px;}
<ul id="nav"><li class="left"></li><li><a href="#">Home</a></li> <li><a href="#">About</a><ul> <li><a href="#">Sub menu 21</a></li><li><a href="#">Sub menu 22</a></li> <li><a href="#">Sub menu 23</a></li><li><a href="#">Sub menu 24</a></li> </ul></li> <li><a href="#">Products</a><ul><li><a href="#">Sub menu 31</a></li> <li><a href="#">Sub menu 32</a></li> <li><a href="#">Sub menu 33</a></li> <li><a href="#">Sub menu 34</a></li></ul> </li> <li><a href="#">Services</a><li><a href="#">Contact Us</a></li></ul>

js代码

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList; 
 
原创粉丝点击