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应用中起了关键作用。
【源码下载】
如果你不愿复制代码及提高代码准确性,你可以点击:下拉菜单 进行本实例源码下载