• 愿流氓資源網能夠幫您學到有用的知識
  • WAP手機版 廣告合作 保存桌面加入收藏設為首頁
當前位置 當前位置:首頁 > 網站代碼 > 其他代碼

網站簡單兼容自適應導航欄代碼

2018-10-15 07:18:00流氓大叔

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

小編百度了一下,折磨出這么一個方法然后將代碼分享給大家。

原理很簡單,利用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美化則需要根據自己的需求來做,本文只提供一個辦法參考。


標簽:網站  代碼  導航  簡單  適應  
   相關評論

本站內容來源于互聯網,僅供用于學習和交流,任何人不得倒賣、行騙、傳播、嚴禁用于商業用途!
請遵循相關法律法規,本站一切資源不代表本站立場如有侵權內容、不妥之處請第一時間聯系我們刪除,敬請諒解!

投訴侵權郵箱:[email protected] 或聯系QQ:409708470? 關鍵詞:流氓,流氓資源網,資源網

吉ICP備19004288號-2網站地圖

福彩3d藏机图 现在开出租车的赚钱吗 tbc版本怎么赚钱 彩运来彩票首页 魔兽世界1.12法师赚钱 上海地铁赚钱吗 完场比分直播500 开pos机赚钱吗 问道渠道服怎么赚钱 体球即时比分网 我中了彩票群 游戏最赚钱ip 趣头条赚钱外挂 北单比分开奖赔率 河南快3 土豪任性赚钱是真假 ff14大地使者那个赚钱