html 代码：

1  2  3  4   
      5   
      6    7   
      8    9 10 11 
     
      12   
      
Home
13   
      
Order
14   
      
Contact
15   
      
About
16   
      ☰17 
     
18 19 

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 }

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 }

JS 代码：

1 var btn=document.getElementsByClassName('responsive-btn')[0]; 2 btn.οnclick=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="☓" 8     } 9     else{10       lis[i].classList.remove('responsive');11       btn.innerHTML="☰"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("☰"); 6      } 7      else{ 8        $('li').addClass('responsive'); 9        $('ul').find('.responsive-btn').html("☓");10      }11   });12 });