卡卡網(wǎng)

前面介紹過一款含二級下拉菜單的CSS3響應式水平導航菜單，該導航的二級菜單是下拉效果，本文再介紹一款含二級菜單的CSS3響應式水平導航菜單，跟前面提到的二級菜單不同，該二級菜單是水平方向排列的。

效果圖

 
PC端導航菜單

 
移動端導航菜單

demodownload

示例介紹

該示例由CSS3實現(xiàn)，導航菜單是響應式的，而其二級菜單是水平方向排列的。

PC端

• 鼠標移到菜單上是，顯示該菜單的二級菜單
• 二級菜單是水平方向排列的

移動端

• 右上角有一個導航菜單打開圖標，默認顯示。
• 左上角有一個導航菜單關閉圖標，默認隱藏。
• 點擊右上角圖標，導航菜單滑出。
• 點擊左上角圖標，導航菜單縮進。

HTML代碼

下面是導航欄PC端HTML代碼結(jié)構(gòu)。

<div class="nav rg">
  <ul class="nav_pc">
    <li>
      <a class="a1" href="javascript:;">網(wǎng)站測速</a>
      <div class="div1">
        <div class="p1">
          <a href="javascript:;">二級菜單</a>
          <a href="javascript:;">二級菜單</a>
          <a href="javascript:;">二級菜單</a>
        </div>
        <div class="clear"></div>
      </div>
    </li>
    <li>
      <a class="a1" href="javascript:;">網(wǎng)站診斷</a>
      <div class="div1">
        <div class="p1">
          <a href="javascript:;">二級菜單</a>
          <a href="javascript:;">二級菜單</a>
          <a href="javascript:;">二級菜單</a>
        </div>
        <div class="clear"></div>
      </div>
    </li>
  </ul>
</div>

下面是導航欄移動端HTML代碼結(jié)構(gòu)。

<div class="div3">
  <ul>
    <li>
      <a href="javascript:;">首頁</a>
    </li>
    <li>
      <a class="a_js2" href="javascript:;">網(wǎng)站測速</a>
      <div class="a_txt2">
        <a href="javascript:;">二級菜單</a>
        <a href="javascript:;">二級菜單</a>
        <a href="javascript:;">二級菜單</a>
      </div>
    </li>
    <li>
      <a class="a_js2" href="javascript:;">網(wǎng)站診斷</a>
      <div class="a_txt2">
        <a href="javascript:;">二級菜單</a>
        <a href="javascript:;">二級菜單</a>
        <a href="javascript:;">二級菜單</a>
      </div>
    </li>
  </ul>
</div>

CSS

示例包含一個css樣式文件style.css，它設置導航菜單的布局、字體等樣式。

.nav{width:60%} 設置導航欄的寬度。.rg {float:right;} 設置導航欄為右浮動。

.nav ul li {float: left;width: 14.28%;height: 100px;} 設置菜單項寬度、高度及浮動屬性。

.nav ul li .div1 .p1 {...} 設置二級菜單寬度、高度及浮動屬性等。

JavaScript

示例包含一個JavaScript文件script.js，用到jQuery編程，主要是實現(xiàn)鼠標與菜單的交互作用。實現(xiàn)方法請看代碼注釋。

PC端，鼠標懸停時展示子導航。

$(".nav ul li").hover(function() {
  $(this).children('').next().stop(true, true).delay(300).slideDown(400);
}, function() {
  $(this).children('').next().stop(true, true).delay(300).slideUp(400);
});

移動端，點擊右上角三橫圖標滑出導航。

$(".a_js").click(function() {
  $(".a_txt").stop(true, false).delay(0).animate({
    width: "100%",
    height: "100%"
  }, 0);
  $(".a_txt").find(".div1").stop(true, false).delay(0).animate({
    opacity: "0.9"
  }, 500);
  $(".a_txt").find(".div2").stop(true, false).delay(0).animate({
    opacity: "1"
  }, 500);
  $(".a_txt").find(".div3").stop(true, false).delay(0).animate({
    right: "0"
  }, 500);
})

移動端，點擊左上角叉圖標，縮進（隱藏）導航。

$(".a_closed").click(function() {
  $(".a_txt").stop(true, false).delay(500).animate({
    width: "0",
    height: "0"
  }, 0);
  $(".a_txt").find(".div1").stop(true, false).delay(0).animate({
    opacity: "0"
  }, 500);
  $(".a_txt").find(".div2").stop(true, false).delay(0).animate({
    opacity: "0"
  }, 500);
  $(".a_txt").find(".div3").stop(true, false).delay(0).animate({
    right: "-80%"
  }, 500);
})

總結(jié)

本文介紹了一款二級菜單水平方向排列的CSS3響應式水平導航菜單，該導航菜單比較常見，可以說是一款通用性很強的導航，喜歡的朋友可以收藏本頁，也可以直接下載源碼備用。

相關文章

• 含二級下拉菜單的CSS3響應式水平導航菜單
• 非常漂亮的響應式導航欄設計
• 簡單實用的響應式導航菜單設計
• CSS3 PC/移動響應式網(wǎng)頁水平導航菜單
• 常見的簡單大方的純CSS3水平下拉導航菜單
• CSS+JS實現(xiàn)可伸縮可折疊的左邊側(cè)欄項目導航菜單
• 純CSS實現(xiàn)二級導航菜單(具有伸縮過渡效果)
• 漂亮的左側(cè)二級導航菜單(伸縮式)【演示/源碼下載】
• 3款有下橫線平滑過渡效果的導航欄菜單
• CSS3實現(xiàn)的可縮進的側(cè)欄導航菜單
• 漂亮的純CSS3水平導航菜單（有過渡動畫效果）
• 可以展開和閉合子菜單的CSS3垂直導航菜單
• 又一個隨內(nèi)容滾動而變化的側(cè)邊/左側(cè)目錄導航

標簽: css3  二級導航菜單  二級菜單  導航菜單  菜單  下拉菜單  導航欄  響應式導航