欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

导航菜单的实现

程序员文章站 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>