JS 下拉菜单
分类:
IT文章
•
2023-11-01 12:06:46
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
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 }