卡卡網(wǎng)

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

效果圖

 
PC端導(dǎo)航菜單

 
移動(dòng)端導(dǎo)航菜單

demodownload

示例介紹

該示例由CSS3實(shí)現(xiàn)，導(dǎo)航菜單是響應(yīng)式的，而其二級(jí)菜單是水平方向排列的。

PC端

• 鼠標(biāo)移到菜單上是，顯示該菜單的二級(jí)菜單
• 二級(jí)菜單是水平方向排列的

移動(dòng)端

• 右上角有一個(gè)導(dǎo)航菜單打開圖標(biāo)，默認(rèn)顯示。
• 左上角有一個(gè)導(dǎo)航菜單關(guān)閉圖標(biāo)，默認(rèn)隱藏。
• 點(diǎn)擊右上角圖標(biāo)，導(dǎo)航菜單滑出。
• 點(diǎn)擊左上角圖標(biāo)，導(dǎo)航菜單縮進(jìn)。

HTML代碼

下面是導(dǎo)航欄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:;">二級(jí)菜單</a>
          <a href="javascript:;">二級(jí)菜單</a>
          <a href="javascript:;">二級(jí)菜單</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:;">二級(jí)菜單</a>
          <a href="javascript:;">二級(jí)菜單</a>
          <a href="javascript:;">二級(jí)菜單</a>
        </div>
        <div class="clear"></div>
      </div>
    </li>
  </ul>
</div>

下面是導(dǎo)航欄移動(dòng)端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:;">二級(jí)菜單</a>
        <a href="javascript:;">二級(jí)菜單</a>
        <a href="javascript:;">二級(jí)菜單</a>
      </div>
    </li>
    <li>
      <a class="a_js2" href="javascript:;">網(wǎng)站診斷</a>
      <div class="a_txt2">
        <a href="javascript:;">二級(jí)菜單</a>
        <a href="javascript:;">二級(jí)菜單</a>
        <a href="javascript:;">二級(jí)菜單</a>
      </div>
    </li>
  </ul>
</div>

CSS

示例包含一個(gè)css樣式文件style.css，它設(shè)置導(dǎo)航菜單的布局、字體等樣式。

.nav{width:60%} 設(shè)置導(dǎo)航欄的寬度。.rg {float:right;} 設(shè)置導(dǎo)航欄為右浮動(dòng)。

.nav ul li {float: left;width: 14.28%;height: 100px;} 設(shè)置菜單項(xiàng)寬度、高度及浮動(dòng)屬性。

.nav ul li .div1 .p1 {...} 設(shè)置二級(jí)菜單寬度、高度及浮動(dòng)屬性等。

JavaScript

示例包含一個(gè)JavaScript文件script.js，用到j(luò)Query編程，主要是實(shí)現(xiàn)鼠標(biāo)與菜單的交互作用。實(shí)現(xiàn)方法請看代碼注釋。

PC端，鼠標(biāo)懸停時(shí)展示子導(dǎo)航。

$(".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);
});

移動(dòng)端，點(diǎn)擊右上角三橫圖標(biāo)滑出導(dǎo)航。

$(".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);
})

移動(dòng)端，點(diǎn)擊左上角叉圖標(biāo)，縮進(jìn)（隱藏）導(dǎo)航。

$(".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é)

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

相關(guān)文章

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

標(biāo)簽: css3  二級(jí)導(dǎo)航菜單  二級(jí)菜單  導(dǎo)航菜單  菜單  下拉菜單  導(dǎo)航欄  響應(yīng)式導(dǎo)航