导航菜单的实现

　　熟练使用导航栏，对于网站排版非常重要,使用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>

posted @ 2019-08-09 12:30 码农下的天空阅读(1053) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

惊风随笔

一码一世界，每一行代码都是一个世界

导航菜单的实现

公告

惊风随笔