软件学堂

网游分类软件分类

下拉菜单JS代码怎么写

2012-11-02 来源:网络

【实例名称】

下拉菜单JS代码怎么写

【实例描述】

分类下拉菜单可以尽可能地显示网站的导航信息。本例学习如何制作下拉式的导航菜单。

【实例代码】

 

<html> <head> <TITLE>下拉菜单-学无忧(www.xue51.com)</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <script language="javascript"> //为各个菜单项定义鼠标事件 startList = function() { if (document.all&&document.getElementById) {   navRoot = document.getElementById("mynav"); //找到菜单根目录     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; </script>

需要在body中添加一些菜单项,注意菜单项根目录的ID必须为“mynav”代码如下所示:

<style type="text/css"> body {  font: normal 11px verdana;  } ul {   margin: 0;   padding: 0;   list-style: none;   width: 150px;   border-bottom: 1px solid #ccc;   } ul li {  position: relative;  } li ul {   position: absolute;   left: 149px;   top: 0;   display: none;   }

/* 菜单项的样式 */ ul li a {   display: block;   text-decoration: none;   color: #777;   background: #fff;   padding: 5px;   border: 1px solid #ccc;   border-bottom: 0;   } * html ul li { float: left; height: 1%; } * html ul li a { height: 1%; } li:hover ul, li.over ul { display: block; } </style>

</head> <body> <ul id="mynav">  <li><a href="#">首页</a></li>  <li><a href="#">帮助</a>  <ul>  <li><a href="#">历史</a></li>  <li><a href="#">团队</a></li>  <li><a href="#">办公室</a></li>  </ul>  </li>  <li><a href="#">客服</a>  <ul>  <li><a href="http://www.google.com">网页设计</a></li>  <li><a href="#">网络销售</a></li>  <li><a href="#">站点服务</a></li>  <li><a href="#">区域服务</a></li>  </ul>  </li>  <li><a href="#">联系方式</a>  <ul>  <li><a href="#">国家</a></li>  <li><a href="#">城市</a></li>  <li><a href="#">地址</a></li>  <li><a href="#">电话</a></li>  </ul>  </li> </ul> </body> </html>

【运行效果】

 下拉菜单运行效果

【难点剖析】

本例在设计时使用了“ul”和“li”元素完成菜单项的设计:使用JavaScript中的“childNodes”属性来获取每一个菜单项。注意“childNodes”是JavaScriptDOM的重要组成部分,在Ajax应用中起了关键作用。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:下拉菜单 进行本实例源码下载 

上一篇:颜色切换板JS代码怎么写
下一篇:JS代码实现左键弹出式菜单

相关文章