大家在(zai)網上經(jing)常(chang)看到很多(duo)網站(zhan)(zhan)都是用自適應的網站(zhan)(zhan)的導(dao)航欄，包(bao)括我們也是。

l六心網絡大表哥百度了一(yi)下(xia)，折(zhe)磨(mo)出這(zhe)么(me)一(yi)個方法(fa)然后將代碼分享給大家。

原理很簡單，利用css的media，進行(xing)限制，在手機(ji)版(ban)訪問的時(shi)候將導航欄(lan)進行(xing)隱藏，利用按鈕點(dian)擊進行(xing)顯示(shi)導航。

這是我自(zi)己折騰的(de)(de)一個超(chao)簡(jian)單的(de)(de)自(zi)適(shi)應導航欄，整體思路也簡(jian)單。

首先是導航(hang)欄(lan)的(de)html結(jie)構是這樣的(de)：

<div class="nav">

   <span class="nav-on">;<i></i><i></i><i></i></span>

   <ul>

       <li><a href="#">首頁</a><;/li>

  &nbsp;    <li><a href="#">欄(lan)目一</a></li>

       <li><a href="#">欄目(mu)二</a></li>

   </ul>

</div>

然后到js代碼，需要(yao)jquery 支持

$(".nav-on").click(function(){

   $(&quot;.nav>ul").slideToggle();

});

嘗試解釋下：用css查詢判斷，在電腦端的時(shi)候導航欄(lan)是正常顯示的，導航欄(lan)觸發按鈕”<span class="nav-on"></span>“則隱藏起(qi)來。

當用(yong)戶是用(yong)手機(ji)訪問的時候，則(ze)把導航(hang)欄(lan)的<ul>做隱藏，然后用(yong)js操(cao)作點擊導航(hang)欄(lan)觸發按(an)鈕則(ze)顯示(shi)整個<ul></ul>里面的內容。

最后大概寫一個css出(chu)來：

.nav{line-height:50px;background: #0099cc;position: relative;}

.nav li{float:left;}

.nav li a{display:block;padding:0 20px;color:#fff;}

.nav span.nav-on{display:none;width:20px;position: absolute;top:12px;right:12px;cursor: pointer;}

.nav-on i{display:block;width:100%;height:5px;background:#fff;margin-bottom:5px;}

/*手機端css代碼*/

@media screen and (max-width:768px){

.nav ul{display:none;width:100%;}

.nav ul li{width:100%;}

.nav span.nav-on{display:block;}

}

如(ru)果需要css美(mei)化則需要根(gen)據自(zi)己的需求來(lai)做，本文只提供一(yi)個辦法參考。