大家在網(wǎng)上經(jīng)?？吹胶芏嗑W(wǎng)站都是用自適應(yīng)的網(wǎng)站的導(dǎo)航欄，包括我們高網(wǎng)也是。

小高百度了一下，折磨出這么一個(gè)方法然后將代碼分享給大家。

原理很簡(jiǎn)單，利用css的media，進(jìn)行限制，在手機(jī)版訪問(wèn)的時(shí)候?qū)?dǎo)航欄進(jìn)行隱藏，利用按鈕點(diǎn)擊進(jìn)行顯示導(dǎo)航。

這是我自己折騰的一個(gè)超簡(jiǎn)單的自適應(yīng)導(dǎo)航欄，整體思路也簡(jiǎn)單。

首先是導(dǎo)航欄的html結(jié)構(gòu)是這樣的：

<div class="nav">

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

    <ul>

        <li><a href="#">首頁(yè)</a></li>

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

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

    </ul>

</div>

然后到j(luò)s代碼，需要jquery 支持

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

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

});

嘗試解釋下：用css查詢判斷，在電腦端的時(shí)候?qū)Ш綑谑钦ｏ@示的，導(dǎo)航欄觸發(fā)按鈕”<span class="nav-on"></span>“則隱藏起來(lái)。

當(dāng)用戶是用手機(jī)訪問(wèn)的時(shí)候，則把導(dǎo)航欄的<ul>做隱藏，然后用js操作點(diǎn)擊導(dǎo)航欄觸發(fā)按鈕則顯示整個(gè)<ul></ul>里面的內(nèi)容。

最后大概寫一個(gè)css出來(lái)：

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

/*手機(jī)端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美化則需要根據(jù)自己的需求來(lái)做，本文只提供一個(gè)辦法參考。