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 }
可以正常显示菜单，但是无法隐藏菜单。。。
只能显示二级菜单，三级菜单被吃了？！
随着鼠标不停地滑过，显示菜单的速度越来越快。。。
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 box-shadow: 2px 2px 2px rgba(0,0,0,0.8); 14 } 15 16 #nav>ul>li>a { 17 border-radius: 10px; 18 } 19 20 #nav ul li { 21 list-style: none; 22 } 23 24 #nav>ul>li { 25 float: left; 26 } 27 28 #nav a { 29 text-decoration: none; 30 color: black; 31 display: block; 32 height: 50px; 33 width: 125px; 34 text-align: center; 35 line-height: 50px; 36 background-color: #ccc; 37 } 38 39 #nav ul ul { 40 position: absolute; 41 /*display: none;*/ 42 opacity: 0; 43 margin: 20px 0 0 0; 44 transition: all 1s ease-in-out; 45 } 46 47 #nav ul ul ul { 48 margin-top: -30px; 49 margin-left: 160px; 50 } 51 52 #nav ul ul a { 53 border-radius: 10px 10px 0 0; 54 border-bottom: 1px solid white; 55 } 56 57 #nav a:hover { 58 color: white; 59 background-color: black; 60 } 61 62 #nav>ul>li:hover>ul { 63 /*display: block;*/ 64 opacity: 1; 65 margin: -15px 0 0 0; 66 } 67 68 #nav>ul ul>li:hover>ul { 69 /*display: block;*/ 70 opacity: 1; 71 margin-left: 140px; 72 margin-top: -50px; 73 } 74 75 /*CSS画三角形*/ 76 #nav>ul>li>ul>li:first-child:before { 77 content: ""; 78 display: block; 79 border-top: 15px solid transparent; 80 border-right: 15px solid transparent; 81 border-bottom: 15px solid #ccc; 82 border-left: 15px solid transparent; 83 width: 0; 84 margin-left: 50px; 85 } 86 87 #nav ul ul ul>li:first-child:before { 88 content: ""; 89 position: absolute; 90 display: block; 91 border-top: 15px solid transparent; 92 border-right: 15px solid #ccc; 93 border-bottom: 15px solid transparent; 94 border-left: 15px solid transparent; 95 width: 0; 96 margin-left: -30px; 97 margin-top: 13px; 98 }
预先定义的二级菜单和三级菜单的display属性不能设置为none，如果先设置为none然后在鼠标滑过的时候改为block，将完全没有动画效果，原因未知。。。
但是如果display不设置为none，在鼠标滑过菜单（隐形）所在的位置时，也会显示出来，纠结。。。