大家在網上經常看到很多網站都是用自适應的網站的導航欄，包括我們也是。

l六心網絡大表哥百度了一下，折磨出這麼一個方法然後将代碼分享給大家。

原理很簡單，利用css的media，進行限制，在手機版訪問的時候将導航欄進行隐藏，利用按鈕點擊進行顯示導航。

這是我自己折騰的一個超簡單的自适應導航欄，整體思路也簡單。

首先是導航欄的html結構是這樣的：

<div class="nav">

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

   <ul>

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

       <li><a href="#">欄目一</a></li>

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

   </ul>

</div>

然後到js代碼，需要jquery 支持

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

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

});

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

當用戶是用手機訪問的時候，則把導航欄的<ul>做隐藏，然後用js操作點擊導航欄觸發按鈕則顯示整個<ul></ul>裡面的内容。

最後大概寫一個css出來：

.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;}

}

如果需要css美化則需要根據自己的需求來做，本文隻提供一個辦法參考。