卡卡網(wǎng)

本文解釋一款最常見的簡單大方的導(dǎo)航菜單，這個導(dǎo)航菜單是響應(yīng)式的，能同時滿足在PC和移動端使用。

效果圖

 
PC端導(dǎo)航菜單

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

demodownload

示例介紹

本示例導(dǎo)航菜單由CSS3實現(xiàn)，它是響應(yīng)式的，能同時滿足PC端和移動端的使用要求。

• PC端導(dǎo)航，鼠標(biāo)移到菜單上時，菜單名稱下方顯示橫線。
• 移動端導(dǎo)航，鼠標(biāo)點(diǎn)擊右上角的按鈕圖標(biāo)時，打開或關(guān)閉導(dǎo)航菜單。

HTML代碼

<div class="c-nav">
  <div class="container navFlex">
    <div class="flexItem"> <img class="logo" src="logo.png" /> </div>
    <div class="flexItem hiden"> <img class="btnImg" src="navBtn.png" /> </div>
    <div class="flexItem show">
      <ul>
        <li><a href="#">首頁</a></li>
        <li><a href="#">品牌故事</a></li>
        <li><a href="#">產(chǎn)品中心</a></li>
        <li><a href="#">網(wǎng)上商城</a></li>
        <li><a href="#">招商加盟</a></li>
        <li><a href="#">行業(yè)新聞</a></li>
        <li><a href="#">聯(lián)系我們</a></li>
      </ul>
    </div>
  </div>
</div>

最外層div是導(dǎo)航條區(qū)域（寬度設(shè)置為100%，即是滿屏）。

第二層div是導(dǎo)航條容器，位置從logo圖片開始，一直到最后一個菜單名結(jié)束。

 有兩個logo的div，前面的是PC端顯示，第二個是移動端顯示。

 ul li 是導(dǎo)航菜單的內(nèi)容。

CSS

.c-nav 設(shè)置導(dǎo)航欄寬度、背景顏色。

.c-nav{
  width: 100%;
  background-color: rgba(176,204,243,0.8);

}

.navFlex 設(shè)置顯示方式、文字顏色等樣式。

.c-nav .navFlex{
  display: flex;
  display: -webkit-flex;
  justify-content:space-between;
  -webkit-justify-content: space-between;
  align-items: center;
  -webkit-align-content: center;
  color: black;
}

ul li 設(shè)置菜單容器樣式，包括位置、字體等樣式。

.c-nav ul li a:hover{...} 設(shè)置菜單鼠標(biāo)懸停時顯示的下橫線的顏色。

.c-nav ul{
  list-style: none;
  margin-bottom: 0px;
  padding-left: 0px;
}
.c-nav ul li{
  padding: 15px 0px 15px 0px;
  margin-left: 30px;
  display: inline-block;
}
.c-nav ul li a{
  color: black;
  padding-bottom: 2px;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.c-nav ul li a:hover{
  border-bottom: 3px solid #000000;
}

JavaScript

本示例用到一點(diǎn)jQuery編程，它主要是監(jiān)控窗口大小變化并對顯示PC還是移動導(dǎo)航做出判斷。另外，對移動端的導(dǎo)航開關(guān)按鈕點(diǎn)擊動作給予響應(yīng)，顯示或關(guān)閉導(dǎo)航菜單。

<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//用于判斷導(dǎo)航欄的狀態(tài)
var toggle = true;
//導(dǎo)航欄按鈕
$('.btnImg').click(function()
  {
    if (toggle)
    {
      $('.btnImg').css("border", "1px solid #b0ccf3");
      toggle = false
    }
    else
    {
      $('.btnImg').css("border", "1px solid transparent");
      toggle = true;
    }
    $(".show").slideToggle(300);
  })
  //窗口大小發(fā)生改變
$(window).resize(function()
{
  //獲取窗口寬度
  var windSize = $(window).width();
  if (windSize > 576)
  {
    $(".show").slideDown(0);
  }
  else
  {
    $(".show").slideUp(0);
  }
});
</script>

總結(jié)

本文介紹了CSS3 PC/移動響應(yīng)式網(wǎng)頁導(dǎo)航菜單，此菜單非常常見，是一個比較大眾化的用例。喜歡的朋友可以直接下載源碼備用。

相關(guān)文章

• 常見的簡單大方的純CSS3水平下拉導(dǎo)航菜單
• CSS+JS實現(xiàn)可伸縮可折疊的左邊側(cè)欄項目導(dǎo)航菜單
• #純CSS實現(xiàn)#網(wǎng)頁返回頂部按鈕設(shè)計【演示/源碼】
• 具有滑動效果的純CSS菜單[演示/源碼]
• 純CSS大氣通用移動網(wǎng)頁導(dǎo)航菜單【演示/源碼下載】
• 純CSS實現(xiàn)二級導(dǎo)航菜單(具有伸縮過渡效果)
• CSS實現(xiàn)Menu Toggle移動菜單切換按鈕(打開/關(guān)閉)
• 漂亮的左側(cè)二級導(dǎo)航菜單(伸縮式)【演示/源碼下載】
• 3款有下橫線平滑過渡效果的導(dǎo)航欄菜單
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計

• 簡單實用的響應(yīng)式導(dǎo)航菜單設(shè)計
• CSS3實現(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)航
• 簡單卻實用的CSS水平和垂直導(dǎo)航欄【演示/源碼】
• CSS3+JQuery實現(xiàn)的三級下拉導(dǎo)航菜單

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