卡卡網(wǎng)

在前文我介紹了一款CSS3 PC/移動(dòng)響應(yīng)式網(wǎng)頁(yè)水平導(dǎo)航菜單，不過它不包含二級(jí)菜單，本文將介紹一款含二級(jí)菜單的CSS3響應(yīng)式水平導(dǎo)航菜單。

效果圖

 
PC端導(dǎo)航菜單

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

demodownload

示例介紹

CSS3實(shí)現(xiàn)的水平導(dǎo)航菜單，該導(dǎo)航菜單是響應(yīng)式的，它隨瀏覽器窗口的大小而自動(dòng)變換樣式。

PC端

• 鼠標(biāo)移到菜單上時(shí)，菜單顏色高亮，且出現(xiàn)下橫線。
• 當(dāng)主菜單有二級(jí)菜單時(shí)，鼠標(biāo)懸停時(shí)顯示二級(jí)菜單。
• 鼠標(biāo)移開主菜單時(shí)，其二級(jí)菜單消失。

移動(dòng)端

• 右上角有一個(gè)菜單開關(guān)圖標(biāo)。
• 點(diǎn)擊菜單開關(guān)圖標(biāo)，菜單滑出或縮進(jìn)；
  同時(shí)，開關(guān)圖標(biāo)也切換成三橫或叉。

HTML代碼

下面是PC端導(dǎo)航菜單的HTML代碼結(jié)構(gòu)。

<div class="fr nav">
  <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
    <li class="active">
      <a href="javascript:void(0)">首頁(yè)</a>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">網(wǎng)站測(cè)速</a>
      <div class="dropdown_menu">
        <a href="#">二級(jí)菜單</a>
        <a href="#">二級(jí)菜單</a>
        <a href="#">二級(jí)菜單</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">網(wǎng)站診斷</a>
      <div class="dropdown_menu">
        <a href="#">二級(jí)菜單</a>
        <a href="#">二級(jí)菜單</a>
        <a href="#">二級(jí)菜單</a>
      </div>
    </li>
    <li> <a href="javascript:void(0)">Ping測(cè)試</a> </li>
    <li> <a href="javascript:void(0)">路由追蹤</a> </li>
    <li> <a href="javascript:void(0)">DNS查詢</a> </li>
  </ul>
</div>

下面是移動(dòng)端導(dǎo)航菜單的HTML代碼結(jié)構(gòu)。

<div class="m_nav">
  <div class="top clearfix">
    <img src="static/image/closed.png" alt="" class="closed" />
  </div>
  <div class="logo">
    <img src="static/image/logo.png" alt="" />
  </div>
  <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
    <li class="active">
      <a href="javascript:void(0)">首頁(yè)</a>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">網(wǎng)站測(cè)速</a>
      <div class="dropdown_menu">
        <a href="#">二級(jí)菜單</a>
        <a href="#">二級(jí)菜單</a>
        <a href="#">二級(jí)菜單</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">網(wǎng)站診斷</a>
      <div class="dropdown_menu">
        <a href="#">二級(jí)菜單</a>
        <a href="#">二級(jí)菜單</a>
        <a href="#">二級(jí)菜單</a>
      </div>
    </li>
    <li> <a href="javascript:void(0)">Ping測(cè)試</a> </li>
    <li> <a href="javascript:void(0)">路由追蹤</a> </li>
    <li> <a href="javascript:void(0)">DNS查詢</a> </li>
  </ul>
</div>

CSS

本示例CSS包含三個(gè)文件，有默認(rèn)樣式reset.css、響應(yīng)式框架bootstrap.css、主要樣式head.css，導(dǎo)航菜單的樣式定義主要是在head.css里。

<!--默認(rèn)樣式-->
<link rel="stylesheet" href="static/css/reset.css" />

<!--響應(yīng)式框架-->
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">

<!--主要樣式-->
<link rel="stylesheet" href="static/css/head.css" />

JavaScript

本示例用到j(luò)Query編程，主要是用來實(shí)現(xiàn)菜單鼠標(biāo)動(dòng)作事件。實(shí)現(xiàn)方法請(qǐng)看代碼注釋。

$(function()
{
  //超過一定高度導(dǎo)航添加類名
  var nav = $("header"); //得到導(dǎo)航對(duì)象  
  var win = $(window); //得到窗口對(duì)象  
  var sc = $(document); //得到document文檔對(duì)象。  
  win.scroll(function()
    {
      if (sc.scrollTop() >= 100)
      {
        nav.addClass("on");
      }
      else
      {
        nav.removeClass("on");
      }
    })
    //移動(dòng)端展開nav
  $('#navToggle').on('click', function()
    {
      $('.m_nav').addClass('open');
    })
    //關(guān)閉nav
  $('.m_nav .top .closed').on('click', function()
    {
      $('.m_nav').removeClass('open');
    })
    //二級(jí)導(dǎo)航  移動(dòng)端
  $(".m_nav .ul li").click(function()
  {
    $(this).children("div.dropdown_menu").slideToggle('slow')
    $(this).siblings('li').children('.dropdown_menu').slideUp('slow');
  });
})

總結(jié)

本文介紹了一款含二級(jí)菜單的CSS3響應(yīng)式水平導(dǎo)航菜單，該菜單很常見，是一款通用性很強(qiáng)的導(dǎo)航菜單。如果你你喜歡該導(dǎo)航菜單，請(qǐng)收藏本頁(yè)，或直接下載源碼備用。

相關(guān)文章

• 常見的簡(jiǎn)單大方的純CSS3水平下拉導(dǎo)航菜單
• CSS+JS實(shí)現(xiàn)可伸縮可折疊的左邊側(cè)欄項(xiàng)目導(dǎo)航菜單
• 純CSS實(shí)現(xiàn)二級(jí)導(dǎo)航菜單(具有伸縮過渡效果)
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計(jì)
• 簡(jiǎn)單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計(jì)

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