JavaScript实现单级下拉导航列表

现在的位置: 首页＞JavaScript＞正文

上篇下篇

JavaScript实现单级下拉导航列表

2010年05月31日 ⁄ JavaScript ⁄ 暂无评论 ⁄ 被围观 1,042+

    这个效果也用到了上次动态注册时候用到的一些层的绝对定位的方法，即position:absolute；还有就是对offsetLeft和offsetTop两个属性的灵活运用。另外，这个效果里面比较重要的一点就是使用了z-index这个css属性，来定义层与层之间的优先级。
    使用z-index定义之前的效果：

    使用z-index定义之后的效果：

    另外，使用z-index也可以避免弹出下拉层后被下面的层或者图片遮挡。select这种下拉列表除外，不知道它的优先级有多高，太高了！！！！
下面是代码效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>单级下拉导航列表js效果</title> <style type="text/css"> body{ font:12px Arial, Helvetica, sans-serif; padding:0; margin:0;} div,ul,li{ padding:0; margin:0;} .content{ width:200px; overflow:hidden; margin:100px auto auto auto;} .linktit1{width:65px; height:20px; line-height:20px; color:#06F;background:url(images/icon_qmenu.gif) no-repeat 45px 0px; padding-left:3px; background-color:#FFF; position:absolute; z-index:3; } .linktit1 a{ text-decoration:none; color:#06F;} .linktit2{width:65px; height:20px; line-height:20px; color:#06F;background:url(images/icon_qmenu.gif) no-repeat 45px -20px; border:1px solid #CCC; border-bottom:0px; padding-left:3px;background-color:#FFF;position:absolute;z-index:3;} .linktit2 a{color:#900;} .menucon{ width:100px; overflow:hidden;border:1px #CCC solid; position:absolute; display:none; z-index:1; background-color:#FFF;} .listcon{ width:90px; margin:0 auto; padding:5px 0px 5px 0px;} .listcon li{ border-bottom:1px dashed #CCC; width:90px; float:left; text-align:left; display:inline; line-height:20px;} .listcon li a{ color:#999; text-decoration:none;} .listcon li a:hover,a:active{ color:#06F; text-decoration:underline;} </style> <script language="javascript" type="text/javascript"> function showLink(){ var mylink = document.getElementById("mylink"); var l = document.getElementById("mylink").offsetLeft-32; var t = document.getElementById("mylink").offsetTop+20; var mymenu = document.getElementById("menu"); mylink.className = "linktit2"; mymenu.style.display = "block"; mymenu.style.left = l+"px"; mymenu.style.top = t+"px"; } function outLink(){ var mylink = document.getElementById("mylink"); var mymenu = document.getElementById("menu"); mylink.className = "linktit1"; mymenu.style.display = "none"; } </script> </head> <body> <div class="content" onmouseover="showLink()" onmouseout="outLink()"> <div class="linktit1" id="mylink" onmouseover="showLink()" ><a href="#">网站导航</a></div> <div class="menucon" id="menu"> <div class="listcon"> <ul> <li><a href="#">商情首页</a></li> <li><a href="#">天府新闻</a></li> <li><a href="#">天府购物</a></li> <li><a href="#">天府展会</a></li> <li><a href="#">天府商企</a></li> </ul> </div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。