卡卡網(wǎng)

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

效果圖

 
PC端導(dǎo)航菜單

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

demodownload

示例介紹

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

PC端

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

移動端

• 右上角有一個菜單開關(guān)圖標(biāo)。
• 點擊菜單開關(guān)圖標(biāo)，菜單滑出或縮進(jìn)；
  同時，開關(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)">首頁</a>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">網(wǎng)站測速</a>
      <div class="dropdown_menu">
        <a href="#">二級菜單</a>
        <a href="#">二級菜單</a>
        <a href="#">二級菜單</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">網(wǎng)站診斷</a>
      <div class="dropdown_menu">
        <a href="#">二級菜單</a>
        <a href="#">二級菜單</a>
        <a href="#">二級菜單</a>
      </div>
    </li>
    <li> <a href="javascript:void(0)">Ping測試</a> </li>
    <li> <a href="javascript:void(0)">路由追蹤</a> </li>
    <li> <a href="javascript:void(0)">DNS查詢</a> </li>
  </ul>
</div>

下面是移動端導(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)">首頁</a>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">網(wǎng)站測速</a>
      <div class="dropdown_menu">
        <a href="#">二級菜單</a>
        <a href="#">二級菜單</a>
        <a href="#">二級菜單</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">網(wǎng)站診斷</a>
      <div class="dropdown_menu">
        <a href="#">二級菜單</a>
        <a href="#">二級菜單</a>
        <a href="#">二級菜單</a>
      </div>
    </li>
    <li> <a href="javascript:void(0)">Ping測試</a> </li>
    <li> <a href="javascript:void(0)">路由追蹤</a> </li>
    <li> <a href="javascript:void(0)">DNS查詢</a> </li>
  </ul>
</div>

CSS

本示例CSS包含三個文件，有默認(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編程，主要是用來實現(xiàn)菜單鼠標(biāo)動作事件。實現(xiàn)方法請看代碼注釋。

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

總結(jié)

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

相關(guān)文章

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

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