JS 下拉菜单

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>

View Code

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 }

View Code

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 }

View Code

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 })

View Code

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 }

View Code

可以正常显示菜单，但是无法隐藏菜单。。。

只能显示二级菜单，三级菜单被吃了？！

随着鼠标不停地滑过，显示菜单的速度越来越快。。。

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 }

View Code

预先定义的二级菜单和三级菜单的display属性不能设置为none，如果先设置为none然后在鼠标滑过的时候改为block，将完全没有动画效果，原因未知。。。

但是如果display不设置为none，在鼠标滑过菜单（隐形）所在的位置时，也会显示出来，纠结。。。

posted @ 2016-08-14 16:00 Aaron_Xiao 阅读(258) 评论(0) 编辑收藏举报

Aaron_Xiao

JS 下拉菜单

公告