下拉菜单JS代码怎么写

2012/11/2 11:20:35作者：佚名来源：网络

移动端

【实例名称】

下拉菜单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代码怎么写

资讯分类

推荐教程

精品软件推荐