responsive-navigator

html 代码：

 <!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>JS Bin</title>
   <link rel="stylesheet" type="text/css" href="test.css">
   <script type="text/javascript" src="test.js"></script>
 </head>
 <body>
 <ul class="nav">
   <li><a href="#" class="normal">Home</a></li>
   <li><a href="#" class="normal">Order</a></li>
   <li><a href="#" class="normal">Contact</a></li>
   <li><a href="#" class="normal">About</a></li>
   <a href="#" class="responsive-btn">☰</li>
 </ul>
 </body>
 </html>

css 代码：

Desktop端：

 ul{
   list-style:none;
   padding:;
 }
 ul.nav{
   width:100%;
   background:#000;
   height: 40px;
 }
 li{
   display:inline-block;
   float:left;
   text-align:center;
   width:60px;
   height:40px;
   line-height:40px;
   font-size: 18px;
   padding: 0 40px;
 }
 a{
   display:inline-block;
   text-decoration:none;
   color:#fff;
   height:40px;
   line-height:40px;
 }
 a.responsive-btn{
   float:right;
   display: none;
   margin-right:10px;
 }

CSS

Mobile端：

 @media screen and (max-width: 600px){
   ul.nav{
     position: relative;
   }
   li{
     display: block;
     float: none;
     text-align: left;
     padding:;
   }
   ul.nav li:not(:first-child){
     display: none;
   }
   ul.nav li:not(:first-child).responsive{
     display: block;
     background: orange;
     width: 100%;
   }
   ul.nav li:not(:first-child).responsive:hover{
     background: #999;
   }
   a.normal{
     margin-left:10px;
   }
   a.responsive-btn{
     position: absolute;
     top:;
     right:;
     display: block;
   }
 }

CSS

JS 代码：

 var btn=document.getElementsByClassName('responsive-btn')[0];
 btn.onclick=function(){
   var lis=document.getElementsByTagName('li');
   for (var i = lis.length - 1; i >= 1; i--) {
     if (!lis[i].classList.contains('responsive')) {
       lis[i].classList.add('responsive');
       btn.innerHTML="☓"
     }
     else{
       lis[i].classList.remove('responsive');
       btn.innerHTML="☰"
     }
   }
 }

OR Jquery代码：

 $(function(){
   $('.responsive-btn').click(function(){
      if($('li').hasClass('responsive')){
        $('li').removeClass('responsive');
        $('ul').find('.responsive-btn').html("☰");
      }
      else{
        $('li').addClass('responsive');
        $('ul').find('.responsive-btn').html("☓");
      }
   });
 });