教你怎么做自適應導航欄

大家經常看到自適應的網站的導航欄是自適應的。

我那天也百度了一下,然后將代碼分享給大家。

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

首先是 導航欄的HTML代碼,利用ul li 做的

<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 代碼

.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;}
}
原文地址:https://www.txcstx.cn/post/1031.html

轉載請注明出處 AE博客|墨淵 ? 教你怎么做自適應導航欄

相關推薦

發表評論

路人甲

網友評論(0)