卡卡網(wǎng)

這個移動端網(wǎng)頁導(dǎo)航菜單是我在使用某網(wǎng)站時，覺得挺好，挺喜歡，就把它剝離下來了。

demodownload

菜單介紹

1、右上角有一個轉(zhuǎn)換開關(guān)，三條行線和X符號，關(guān)閉和打開菜單時，相互切換。

2、點(diǎn)擊三條行線，彈出菜單；點(diǎn)擊X符號，關(guān)閉菜單。

3、一級菜單彈出效果采用漸顯方式，二級菜單打開則采用下拉方式。它們的顯示都使用了animation動畫效果。

4、擁有二級菜單的一級菜單右邊有個向右的箭頭，點(diǎn)擊它就顯示其二級菜單，這時箭頭變?yōu)橄蛳隆?/p>

5、點(diǎn)擊右上角的X符號按鈕，關(guān)閉菜單。

菜單代碼結(jié)構(gòu)

1、HTML代碼

<div class="do-nav-mwp do-nav-phone">
  <input type="checkbox" id="do-m-menustate" class="do-m-menustate">
  <div class="do-nav-m">
    <div class="do-nav-m-title animate">
      <div class="do-site-name">
        <h3></h3></div>
      <div class="do-m-menustate do-btn-line do-nav-btn">
        <label class="do-m-menu-btn" for="do-m-menustate"><span></span><span></span><span></span></label>
      </div>
    </div>
    <div class="do-phoneNav-overlay"></div>
    <div class="do-nav-m-bar animate">
      <ul class="do-nav-m-ul clearfix">
        <li class="nav740469 active" data-id="740469"><a href="http://webkaka.com/"><span>首頁</span><em>Home</em></a></li>
        <li class="nav740473" data-id="740473"><a href="http://webkaka.com/"><span>關(guān)于我們</span><em>About US</em></a></li>
        <li class="nav740475" data-id="740475"><a href="javascript:"><span>服務(wù)器租用</span><em>Dedicated Server</em></a>
          <input type="checkbox" id="inputNavSub740475" class="do-m-menustate do-m-sub">
          <label for="inputNavSub740475" class="icon-isSub"></label>
          <ul class="z-nav-sub">
            <li class="nav740470" data-id="740470"><a href="http://webkaka.com/"><span>香港服務(wù)器</span><em>Hong Kong Server</em></a></li>
            <li class="nav740471" data-id="740471"><a href="http://webkaka.com/"><span>日本服務(wù)器</span><em>Japan Server</em></a></li>
            <li class="nav744663" data-id="744663"><a href="http://webkaka.com/"><span>韓國服務(wù)器</span><em>Korea Server</em></a></li>
            <li class="nav744664" data-id="744664"><a href="http://webkaka.com/"><span>美國服務(wù)器</span><em>Cambodia Server</em></a></li>
            <li class="nav744665" data-id="744665"><a href="http://webkaka.com/"><span>越南服務(wù)器</span><em>Vietnam Server</em></a></li>
            <li class="nav744680" data-id="744680"><a href="http://webkaka.com/"><span>美國服務(wù)器</span><em>America Server</em></a></li>
          </ul>
        </li>
        <li class="nav741866" data-id="741866"><a href="http://webkaka.com/" target="_blank"><span>客服中心</span><em>CS</em></a></li>
        <li class="nav740485" data-id="740485"><a href="http://webkaka.com/"><span>聯(lián)系我們</span><em>Contact</em></a></li>
      </ul>
      <div class="do-site-name animate do-nav-m-bar-name">
        <h3></h3>
        <h3><a href="/"><img class="animate" /></a></h3></div>
    </div>
  </div>
</div>

class為do-m-menu-btn的label標(biāo)簽，是右上角的轉(zhuǎn)換開關(guān)（三條行線和X符號）。

第一個 ul li 標(biāo)簽是一級菜單，一級菜單某個li標(biāo)簽里的ul li標(biāo)簽是該一級菜單的二級菜單。

class為icon-isSub的label標(biāo)簽，是一個字體符號容器，即是一級菜單右邊的箭頭符號。

2、CSS

<link href="layout.css" rel="stylesheet" type="text/css" />
<!-- 
    二級菜單用到字體符號(小箭頭) 
    無二級菜單可不引用下面的字體css文件
-->
<link href="webfonts/style.css" rel="stylesheet" type="text/css" />

CSS包含兩個CSS文件，layout.css是必要文件，而webfonts/style.css則是二級菜單用到的箭頭符號字體文件，如果你的菜單沒有二級菜單，那么這個文件可以不要。

注意事項

若使用了二級菜單所需的字體符號，那么服務(wù)器需要配置支持幾個格式的文件，其實(shí)很簡單，就是加上幾個支持 MIME 類型(.eot .svg .ttf .woff)，請參考：

• Linux Nginx安裝配置Font Awesome圖標(biāo)字體
• IIS6.0安裝配置FontAwesome圖標(biāo)字體運(yùn)行環(huán)境
• IIS7.5安裝配置Font Awesome圖標(biāo)字體的方法
• Font Awesome圖標(biāo)在IE瀏覽器不顯示的解決方法

總結(jié)

本文介紹了一款大氣通用的移動端網(wǎng)頁導(dǎo)航菜單，因為是從他人網(wǎng)站上剝離下來的，所以代碼有些臃腫，多了一些其實(shí)用不到的代碼，但不影響菜單的運(yùn)行效果。

如果你也喜歡該菜單，那么你可以把源代碼下載后，自己進(jìn)一步精化代碼，做到極致是只保留必要的那些代碼，把用不上的代碼統(tǒng)統(tǒng)刪掉，但可能要花一點(diǎn)時間。

您可能對以下文章也感興趣

• 純CSS實(shí)現(xiàn)二級導(dǎo)航菜單(具有伸縮過渡效果)
• CSS實(shí)現(xiàn)Menu Toggle移動菜單切換按鈕(打開/關(guān)閉)
• 漂亮的左側(cè)二級導(dǎo)航菜單(伸縮式)【演示/源碼下載】
• CSS+JS：一款常見的簡單大方又實(shí)用的移動網(wǎng)頁(二級)菜單設(shè)計
• 純CSS實(shí)現(xiàn)二級導(dǎo)航菜單(具有伸縮過渡效果)
• CSS實(shí)現(xiàn)Menu Toggle移動菜單切換按鈕(打開/關(guān)閉)
• 漂亮的左側(cè)二級導(dǎo)航菜單(伸縮式)【演示/源碼下載】
• 3款有下橫線平滑過渡效果的導(dǎo)航欄菜單
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計

• 簡單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計
• CSS3實(shí)現(xiàn)的可縮進(jìn)的側(cè)欄導(dǎo)航菜單
• 漂亮的純CSS3水平導(dǎo)航菜單（有過渡動畫效果）
• 可以展開和閉合子菜單的CSS3垂直導(dǎo)航菜單
• 又一個隨內(nèi)容滾動而變化的側(cè)邊/左側(cè)目錄導(dǎo)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航
• 簡單卻實(shí)用的CSS水平和垂直導(dǎo)航欄【演示/源碼】
• CSS3+JQuery實(shí)現(xiàn)的三級下拉導(dǎo)航菜單

標(biāo)簽: 菜單  移動菜單  導(dǎo)航菜單