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 }
可以正常显示菜单，但是无法隐藏菜单。。。
只能显示二级菜单，三级菜单被吃了？！
随着鼠标不停地滑过，显示菜单的速度越来越快。。。
时间： 2024-10-23 06:31:58