标签：ice css ack sheet ide href home 代码 splay
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">☰</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 }
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.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="☓" 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 });
标签：ice css ack sheet ide href home 代码 splay
原文地址：http://www.cnblogs.com/coding-swallow/p/7735632.html
