水平方向的PopMenu-弹出菜单(DIV+CSS+JS)
此POPMENU根据alistapart的articles改编,比DW中用显示、隐藏层的方法要简单。在IE6.0 IE5.X Firefox
NS都能正确显示,只用到很少的JS代码,使用时只要把<ul></ul>部分插入需要的地方即可,不会因分辨率不同
而发生错位的现象。
菜单演示>>
CSS代码
html:
js代码
--------------------------------------------------------------------------------
垂直方向: 菜单演示>>
css:
js:
html:
此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; } |
html:
<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; if (node.nodeName=="LI") { node.οnmοuseοver=function() { this.className+=" over"; } node.οnmοuseοut=function() { this.className=this.className.replace(" over", ""); } } } } } window.οnlοad=startList; |
--------------------------------------------------------------------------------
垂直方向: 菜单演示>>
css:
body { font-family: Arial, Helvetica, sans-serif; font-size: 11px; } #nav, #nav ul { list-style: none; background: #F9F9F9; font-weight: bold; padding: 0px; margin: 0px; border: solid 1px #CCCCCC; border-bottom: 0px; width: 150px; text-align: left; } #nav ul ul{ border: solid 1px #CCCCCC; border-bottom: 0px; } #nav a { display: block; width: 150px; w/idth: 140px; color: #333333; text-decoration: none; text-align: center; border-bottom: solid 1px #CCCCCC; text-align: left; padding-left: 10px; } #nav a:hover{ color: #336666; } #nav a.selected{ background: url(../images/arrow.gif) no-repeat right 50%; } #nav li { line-height: 22px; position: relative; } #nav li ul { position: absolute; left: -999em; width: 150px; font-weight: normal; margin: 0px; padding: 0px; } #nav li li { width: 150px; } #nav li ul a { width: 150px; w/idth: 126px; padding: 0px 12px; line-height: 22px; text-align: left; } #nav li ul ul { margin: 0px 0 0 150px; } #nav li:hover ul ul,#nav li.sfhover ul ul{ left: -999em; } #nav li:hover ul, #nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{ left: auto; } #nav li:hover ul,#nav li.sfhover ul{ left: 150px; top: 0px; } #nav li:hover, #nav li.sfhover { background: #F5E3C0; } * html #nav li { float: left; height: 1%; } * html #nav li a { height: 1%; } |
js:
<script type="text/javascript"><!--//--><![CDATA[//><!-- sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI"); for (var i=0; i<sfEls.length; i++) { sfEls.οnmοuseοver=function() { this.className+=" sfhover"; } sfEls.οnmοuseοut=function() { this.className=this.className.replace(new RegExp(" sfhover//b"), ""); } } } if (window.attachEvent) window.attachEvent("onload", sfHover); //--><!]]></script> |
html:
<ul id="nav"> <li><a href="">Home</a></li> <li><a href="/aboutme.html">About Me</a></li> <li><a class="selected" href="/tutorials.html">Tutorials</a> <ul> <li><a href="#">Sub Menu 31</a></li> <li><a class="selected" href="#">Sub Menu 32</a> <ul> <li><a href="#">Sub Menu 321</a></li> <li><a href="#">Sub Menu 322</a></li> <li><a href="#">Sub Menu 323</a></li> <li><a href="#">Sub Menu 324</a></li> </ul> </li> <li><a href="#">Sub Menu 33</a></li> <li><a href="#">Sub Menu 34</a></li> </ul> </li> <li><a class="selected" href="/gallery/gallery.html">Gallery</a> <ul> <li><a href="#">Sub Menu 41</a></li> <li><a class="selected" href="#">Sub Menu 42</a> <ul> <li><a href="#">Sub Menu 421</a></li> <li><a href="#">Sub Menu 422</a></li> <li><a href="#">Sub Menu 423</a></li> <li><a href="#">Sub Menu 424</a></li> </ul> </li> <li><a href="#">Sub Menu 43</a></li> <li><a href="#">Sub Menu 44</a></li> </ul> </li> <li><a href="#">Contact Me</a></li> </ul> |