非常简单的纯JS导航栏

学习前端也有一会儿了，教大家一个非常简单的纯JS导航，话不多说看代码

CSS

1 <style>
2         *{ margin: 0; padding: 0; list-style: none; }
3         .nav { width: 430px; height: 40px; background: skyblue; margin: 100px auto; text-align: center; line-height: 40px; }
4         a { color: #fff; text-decoration: none; }
5         .nav li { width: 100px; height: 40px; background: skyblue; }
6         .nav>li { float: left; margin-right: 10px;  }
7         .nav>li:last-child { margin-right: 0; }
8         .nav li ul { position: absolute; height: 0; overflow: hidden; transition: height 0.5s; }
9 </style>

JavaScript

 1 <script>
 2     function  nav(liID,ulID) {
 3         var oLi = document.getElementById(liID);
 4         var oUl = document.getElementById(ulID);
 5 
 6         oLi.onmouseover = function () {
 7             oUl.style.height = '130px';
 8         };
 9         oLi.onmouseout = function () {
10             oUl.style.height = '0';
11         }
12     }
13     nav('li1','ul1');
14     nav('li2','ul2');
15     nav('li3','ul3');
16 </script>

HTML

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title></title>
 6 </head>
 7 <body>
 8 <ul class="nav">
 9     <li>
10         <a href="#">首页</a>
11     </li>
12     <li id="li1">
13         <a href="#">首页</a>
14         <ul id="ul1">
15             <li><a href="#" >界面设计</a></li>
16             <li><a href="#" >界面设计</a></li>
17             <li><a href="#" >界面设计</a></li>
18         </ul>
19     </li>
20     <li id="li2">
21         <a href="#">首页</a>
22         <ul id="ul2">
23             <li><a href="#" >界面设计</a></li>
24             <li><a href="#" >界面设计</a></li>
25             <li><a href="#" >界面设计</a></li>
26         </ul>
27     </li>
28     <li id="li3">
29         <a href="#">首页</a>
30         <ul id="ul3">
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 </body>
38 </html>

 

posted @ 2018-10-12 15:44  LingYuanTech  阅读(5658)  评论(0)    收藏  举报