导航菜单的实现
程序员文章站
2022-06-20 21:06:28
熟练使用导航栏，对于网站排版非常重要,使用CSS，js，jq等你可以转换成好看的导航栏而不是枯燥的HTML菜单。 CSS实现： js实现： jq实现： ......
熟练使用导航栏，对于网站排版非常重要,使用css，js，jq等你可以转换成好看的导航栏而不是枯燥的html菜单。
css实现：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="genarator" content="sublime text"/>
6 <meta name="description" content="菜单的实现" />
7 <meta name="keywords" content="css实现，下拉菜单"/>
8 <title>css实现下拉菜单</title>
9 <style type="text/css">
10 *{ margin:0px; padding:0px;}
11 #menu{
12 background-color:#eee;
13 width:600px;
14 height:40px;
15 margin:0 auto;
16 }
17 ul{ list-style:none;}
18 ul li{
19 float:left;
20 line-height:40px;
21 text-align:center;
22 position:relative;
23 }
24 a{
25 text-decoration:none;
26 color:#000;
27 display:block;
28 width:90px;
29 }
30 a:hover{
31 color:#fff;
32 background-color:#666;
33 }
34 ul li ul li{
35 float:none;
36 border-left:none;
37 margin-top:2px;
38 background-color:#eee;
39 }
40 ul li ul{
41 display:none;
42 width:90px;
43 position:absolute;
44 }
45 ul li:hover ul{ display:block;}
46 </style>
47 </head>
48 <body>
49 <div id="menu">
50 <ul>
51 <li><a href="#">首页</a></li>
52 <li><a href="#">课程大厅</a>
53 <ul>
54 <li><a href="#">javascript</a></li>
55 <li><a href="#">jquery</a></li>
56 </ul>
57 </li>
58 <li><a href="#">学习中心</a>
59 <ul>
60 <li><a href="#">视频学习</a></li>
61 <li><a href="#">案例学习</a></li>
62 <li><a href="#">交流平台</a></li>
63 </ul>
64 </li>
65 <li><a href="#">经典案例</a></li>
66 <li><a href="#">关于我们</a></li>
67 <li><a href="#">联系我们</a></li>
68 </ul>
69 </div>
70 </body>
71 </html>
js实现：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="genarator" content="sublime text"/>
6 <meta name="description" content="菜单的实现" />
7 <meta name="keywords" content="javascript实现，下拉菜单"/>
8 <title>javascript实现下拉菜单</title>
9 <style type="text/css">
10 *{ margin:0px; padding:0px;}
11 body{
12 font-family:verdana, geneva, sans-serif;
13 font-size:14px;
14 }
15 #nav{
16 width:600px;
17 height:40px;
18 background-color:#eee;
19 margin:0 auto;
20 }
21 ul{ list-style:none;}
22 ul li{
23 float:left;
24 line-height:40px;
25 text-align:center;
26 width:100px;
27 }
28 a{
29 text-decoration:none;
30 color:#000;
31 display:block;
32 }
33 a:hover{
34 color:#f00;
35 background-color:#666;
36 }
37 ul li ul li{
38 float:none;
39 background-color:#eee;
40 margin:2px 0px;
41 }
42 ul li ul{ display:none;}
43 </style>
44 <script type="text/javascript">
45
46 function displaysubmenu(li) {
47
48 var submenu = li.getelementsbytagname("ul")[0];
49
50 submenu.style.display = "block";
51
52 }
53
54 function hidesubmenu(li) {
55
56 var submenu = li.getelementsbytagname("ul")[0];
57
58 submenu.style.display = "none";
59
60 }
61
62 </script>
63 </head>
64
65 <body>
66 <div id="nav">
67 <ul>
68 <li><a href="#">首页</a></li>
69 <li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">课程大厅</a>
70 <ul>
71 <li><a href="#">javascript</a></li>
72 <li><a href="#">html/css</a></li>
73 </ul>
74 </li>
75 <li onmouseover="displaysubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#">学习中心</a>
76 <ul>
77 <li><a href="#">视频学习</a></li>
78 <li><a href="#">实例练习</a></li>
79 <li><a href="#">问与答</a></li>
80 </ul>
81 </li>
82 <li><a href="#">经典案例</a></li>
83 <li><a href="#">关于我们</a></li>
84 <li><a href="#">联系我们</a></li>
85 </ul>
86 </div>
87 </body>
88 </html>
jq实现：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="genarator" content="sublime text"/>
6 <meta name="description" content="菜单的实现" />
7 <meta name="keywords" content="jquery实现，下拉菜单"/>
8 <title>jquery实现下拉菜单</title>
9 <style type="text/css">
10 *{ margin:0px; padding:0px;}
11 #menu{
12 background-color:#eee;
13 width:600px;
14 height:40px;
15 margin:0 auto;
16 }
17 ul{ list-style:none;}
18 ul li{
19 float:left;
20 line-height:40px;
21 text-align:center;
22 position:relative;
23 }
24 a{
25 text-decoration:none;
26 color:#000;
27 display:block;
28 width:90px;
29 }
30 a:hover{
31 color:#fff;
32 background-color:#666;
33 }
34 ul li ul li{
35 float:none;
36 border-left:none;
37 margin-top:2px;
38 background-color:#eee;
39 }
40 ul li ul{
41 width:90px;
42 position:absolute;
43 left:0px;
44 top:40px;
45 display:none;
46 }
47 </style>
48 <script src="jquery-1.12.0.min.js"></script>
49 <script type="text/javascript">
50 $(function(){
51
52 $(".navmenu").mouseover(function(){
53
54 $(this).children("ul").show();
55
56 })
57
58 $(".navmenu").mouseout(function(){
59
60
61 $(this).children("ul").hide();
62
63
64 })
65
66 })
67
68 </script>
69 </head>
70 <body>
71 <div id="menu">
72 <ul>
73 <li><a href="#">首页</a></li>
74 <li class="navmenu"><a href="#">课程大厅</a>
75 <ul>
76 <li><a href="#">javascript</a></li>
77 <li><a href="#">jquery</a></li>
78 </ul>
79 </li>
80 <li class="navmenu"><a href="#">学习中心</a>
81 <ul>
82 <li><a href="#">视频学习</a></li>
83 <li><a href="#">案例学习</a></li>
84 <li><a href="#">交流平台</a></li>
85 </ul>
86 </li>
87 <li><a href="#">经典案例</a></li>
88 <li><a href="#">关于我们</a></li>
89 <li><a href="#">联系我们</a></li>
90 </ul>
91 </div>
92 </body>
93 </html>