HTML
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>下拉菜单</title> 6 <link rel="stylesheet" href="css/style.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 8 <script src="js/script.js"></script> 9 </head> 10 <body> 11 <div id="nav"> 12 <ul> 13 <li><a href="#">首页</a></li> 14 <li><a href="#">学习 +</a> 15 <ul> 16 <li><a href="#">JavaScript</a></li> 17 <li><a href="#">jQuery</a></li> 18 </ul> 19 </li> 20 <li><a href="#">案例 +</a> 21 <ul> 22 <li><a href="#">JavaScript ></a> 23 <ul> 24 <li><a href="#">下拉菜单</a></li> 25 <li><a href="#">图片轮播</a></li> 26 <li><a href="#">拖拽效果</a></li> 27 </ul> 28 </li> 29 <li><a href="#">jQuery ></a> 30 <ul> 31 <li><a href="#">下拉菜单</a></li> 32 <li><a href="#">图片轮播</a></li> 33 <li><a href="#">拖拽效果</a></li> 34 </ul> 35 </li> 36 </ul> 37 </li> 38 <li><a href="#">关于</a></li> 39 </ul> 40 </div> 41 </body> 42 </html>
CSS实现三级菜单
1 /*静态页面样式*/ 2 * { 3 margin:0; 4 padding:0; 5 } 6 7 #nav { 8 width: 500px; 9 height: 50px; 10 margin: 50px auto; 11 background-color: #ccc; 12 border-radius: 10px; 13 } 14 15 ul li { 16 list-style: none; 17 } 18 19 #nav>ul>li { 20 float: left; 21 } 22 23 ul a { 24 text-decoration: none; 25 color: black; 26 display: block; 27 text-align: center; 28 height: 50px; 29 line-height: 50px; 30 width: 125px; 31 background-color: #ccc; 32 border-radius: 10px; 33 } 34 35 36 ul a:hover { 37 color: white; 38 background-color: black; 39 border-radius: 10px; 40 } 41 42 ul ul { 43 position: absolute; 44 display: none; 45 } 46 47 ul ul ul { 48 position: absolute; 49 margin-left: 125px; 50 margin-top: -50px; 51 display: none; 52 } 53 54 55 /*CSS显示下拉菜单*/ 56 ul li:hover>ul { 57 display: block; 58 }
JS实现三级菜单
1 window.onload = showMenu; 2 3 function showMenu() { 4 var nav = document.getElementById("nav"); 5 var list = nav. getElementsByTagName("li"); 6 7 for (var i = 0, l = list.length; i < l; i++) { 8 list[i].onmouseover = function() { 9 var sub_menu = this.getElementsByTagName("ul")[0]; 10 if(sub_menu) { 11 sub_menu.style.display = "block"; 12 } 13 } 14 list[i].onmouseout = function() { 15 var sub_menu = this.getElementsByTagName("ul")[0]; 16 if(sub_menu) { 17 sub_menu.style.display = "none"; 18 } 19 } 20 } 21 }
jQuery实现三级菜单
1 $(document).ready(function() { 2 $("#nav").find("li").mouseover(function() { 3 $(this).children("ul").show(); 4 }); 5 $("#nav").find("li").mouseout(function() { 6 $(this).children("ul").hide(); 7 }); 8 })
show()和hide()不能传入参数，传入参数就有bug，原因未知。。。
而且也不支持slide和fade。。。
JS实现动画菜单
1 window.onload = showMenu; 2 3 function showMenu() { 4 var nav = document.getElementById("nav"); 5 var list = nav.getElementsByTagName("li"); 6 7 for (var i = 0, l = list.length; i < l; i++) { 8 list[i].onmouseover = function() { 9 var sub_menu = this.getElementsByTagName("ul")[0]; 10 if(sub_menu) { 11 sub_menu.style.display = "block"; 12 var addH = function() { 13 var h = sub_menu.offsetHeight; 14 h += 5; 15 if(h >= 100) { 16 sub_menu.style.height = 100 + "px"; 17 } else { 18 sub_menu.style.height = h + "px"; 19 } 20 }; 21 setInterval(addH, 50); 22 } 23 } 24 25 list[i].onmouseout = function() { 26 var sub_menu = this.getElementsByTagName("ul")[0]; 27 if(sub_menu) { 28 var subH = function() { 29 var h = sub_menu.offsetHeight; 30 h -= 5; 31 if(h <= 0) { 32 sub_menu.style.height = 0 + "px"; 33 sub_menu.style.display = "none"; 34 } else { 35 sub_menu.style.height = h + "px"; 36 } 37 }; 38 setInterval(subH, 50); 39 } 40 } 41 } 42 }
可以正常显示菜单，但是无法隐藏菜单。。。
只能显示二级菜单，三级菜单被吃了？！
随着鼠标不停地滑过，显示菜单的速度越来越快。。。
原文：http://www.cnblogs.com/cc156676/p/5770389.html
