Erlo

导航菜单的实现

时间:2019-08-12 14:04   阅读:24次   来源:博客园页面报错

点赞

  熟练使用导航栏,对于网站排版非常重要,使用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
        下一篇:玫瑰花小制作分享-JavaScript(七夕专属浪漫)                

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-08-23 01:52:02Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 返回顶部