javascript DOM版/javascript DOM setTimeout版/jQurey版 菜单下拉 javascript drop-down menu
2011-11-28 11:21
246 查看
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Drop-down menu</title> <style type="text/css"> body {font:normal 11px verdana;margin:0;padding:0;} ul{margin:0;padding:0;list-style:none;} h3{width:400px;margin:30px auto;text-align:center;} .nav{width:150px;border-bottom: 1px solid #ccc;margin:0 auto;} .nav li{height:22px;line-height:22px;position:relative;color:#777;background:#fff;border:1px solid #ccc;border-bottom:0;vertical-align:top;} .nav li ul{position:absolute;width:150px;left:148px;top:0;display:none;border-bottom: 1px solid #ccc;} .nav li a{display:block;height:22px;text-decoration:none;color:#777;padding:0 10px;cursor:pointer;} .nav li a:hover{color:#E2144A;background:#f9f9f9;} .nav li.hover ul{display:block;} .nav li .hover{display:block;} </style> </head> <body> <h3>----------javascript DOM版 ----------</h3> <ul class="nav" id="javascriptNav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> <script type="text/javascript"> function startList(id){ if(!document.getElementById(id)) returnfalse; if(!document.getElementsByTagName) returnfalse; var navRoot = document.getElementById(id); for (var i=0; i<navRoot.childNodes.length; i++) { var node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" hover"; } node.onmouseout=function() { this.className=this.className.replace(" hover", ""); } } } } window.onload =function(){ startList("javascriptNav"); } </script> <h3>-----------javascript DOM setTimeout版 ----------</h3> <ul class="nav" id="setTimeoutNav"> <li><a href="#">Home</a></li> <li onmouseover="showMune('m1')" onmouseout="clearTime()"><a href="#">About</a> <ul id="m1"> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li onmouseover="showMune('m2')" onmouseout="clearTime()"><a>Services</a> <ul id="m2"> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li onmouseover="showMune('m3')" onmouseout="clearTime()"><a href="#">Contact Us</a> <ul id="m3"> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> <script type="text/javascript"> var clearElement,liMune; function showMune(id){ if(!document.getElementById(id)) returnfalse; if(clearElement){ window.clearTimeout(clearElement); clearElement =null; } hideMune(); liMune = document.getElementById(id); liMune.className +=" hover"; } function hideMune(){ if(liMune){ liMune.className=liMune.className.replace(" hover", ""); } } function clearTime(){ clearElement = window.setTimeout(hideMune,500); } </script> <h3>-----------jQurey版 ----------</h3> <ul class="nav" id="jQureyNav"> <li><a href="#">Home</a></li> <li><a href="#">About</a> <ul> <li><a href="#">History</a></li> <li><a href="#">Team</a></li> <li><a href="#">Offices</a></li> </ul> </li> <li><a href="#">Services</a> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">Internet Marketing</a></li> <li><a href="#">Hosting</a></li> <li><a href="#">Domain Names</a></li> <li><a href="#">Broadband</a></li> </ul> </li> <li><a href="#">Contact Us</a> <ul> <li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li> <li><a href="#">USA</a></li> <li><a href="#">Australia</a></li> </ul> </li> </ul> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#jQureyNav li").hover( function(){ $(this).addClass("hover"); }, function(){ $(this).removeClass("hover") } ); }); </script> </body> </html>
相关文章推荐
- Javascript实现简单的下拉二级菜单
- javascript(js)动态添加省、市、区下拉框菜单
- javascript实现在下拉列表中显示多级树形菜单的方法
- javascript下拉列表中显示树形菜单的实现方法
- 原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
- Javascript实现简单的下拉二级菜单
- javascript 三级下拉选择菜单Levels对象
- JavaScript实现动态下拉收起菜单+css实现动画效果
- JavaScript 多级联动浮动(下拉)菜单 (第二版)
- 用javascript的下拉列表菜单中选中所需要运算的数值来实现简单的加法运算
- JavaScript创建水平导航下拉菜单
- DropMenuWidget(下拉二级菜单)
- Javascript实现简单的下拉二级菜单
- javascript省市区三级联动下拉框菜单实例演示
- javascript---drop-menu(向上,向下,向右伸展导航菜单)
- javascript下拉列表中显示树形菜单的实现方法
- javascript DOM 带下拉子菜单的导航菜单
- javascript下拉列表菜单的实现方法
- javascript 三级下拉选择菜单Levels对象
- JAVAscript——菜单下拉列表练习(阻止事件冒泡)