responsive-navigator

html 代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>JS Bin</title>
 7   <link rel="stylesheet" type="text/css" href="test.css">
 8   <script type="text/javascript" src="test.js"></script>
 9 </head>
10 <body>
11 <ul class="nav">
12   <li><a href="#" class="normal">Home</a></li>
13   <li><a href="#" class="normal">Order</a></li>
14   <li><a href="#" class="normal">Contact</a></li>
15   <li><a href="#" class="normal">About</a></li>
16   <a href="#" class="responsive-btn">&#9776;</li>
17 </ul>
18 </body>
19 </html>

css 代码：

Desktop端：

 1 ul{
 2   list-style:none;
 3   padding:0;
 4 }
 5 ul.nav{
 6   width:100%;
 7   background:#000;
 8   height: 40px;
 9 }
10 li{
11   display:inline-block;
12   float:left;
13   text-align:center;
14   width:60px;
15   height:40px;
16   line-height:40px;
17   font-size: 18px;
18   padding: 0 40px;
19 }
20 a{
21   display:inline-block;
22   text-decoration:none;
23   color:#fff;
24   height:40px;
25   line-height:40px;
26 }
27 a.responsive-btn{
28   float:right;
29   display: none;
30   margin-right:10px;
31 }
CSS

Mobile端：

 1 @media screen and (max-width: 600px){
 2   ul.nav{
 3     position: relative;
 4   }
 5   li{
 6     display: block;
 7     float: none;
 8     text-align: left;
 9     padding:0;
10   }
11   ul.nav li:not(:first-child){
12     display: none;
13   }
14   ul.nav li:not(:first-child).responsive{
15     display: block;
16     background: orange;
17     width: 100%;
18   }
19   ul.nav li:not(:first-child).responsive:hover{
20     background: #999;
21   }
22   a.normal{
23     margin-left:10px;
24   }
25   a.responsive-btn{
26     position: absolute;
27     top: 0;
28     right: 0;
29     display: block;
30   }
31 }
CSS

JS 代码：

 1 var btn=document.getElementsByClassName('responsive-btn')[0];
 2 btn.onclick=function(){
 3   var lis=document.getElementsByTagName('li');
 4   for (var i = lis.length - 1; i >= 1; i--) {
 5     if (!lis[i].classList.contains('responsive')) {
 6       lis[i].classList.add('responsive');
 7       btn.innerHTML="&#9747;"
 8     }
 9     else{
10       lis[i].classList.remove('responsive');
11       btn.innerHTML="&#9776;"
12     }
13   }
14 }

OR Jquery代码：

 1 $(function(){
 2   $('.responsive-btn').click(function(){
 3      if($('li').hasClass('responsive')){
 4        $('li').removeClass('responsive');
 5        $('ul').find('.responsive-btn').html("&#9776;");
 6      }
 7      else{
 8        $('li').addClass('responsive');
 9        $('ul').find('.responsive-btn').html("&#9747;");
10      }
11   });
12 });

 

posted @ 2017-10-26 10:41  CodingSwallow  阅读(125)  评论(0)  编辑  收藏  举报