卡卡網(wǎng)

本文介紹一款漂亮的CSS3藍色垂直導(dǎo)航菜單。

效果圖

demodownload

示例介紹

該示例由CSS3實現(xiàn)。

• 導(dǎo)航背景為自上而下藍色漸變加深。
• 點擊菜單時，加長的背景滑動到該菜單上。

HTML代碼

下面是HTML代碼結(jié)構(gòu)。

  <ul class='menu'>
    <li class='menu-item'>
      <a href='javascript:;'>卡卡測速網(wǎng)</a>
    </li>
    <li class='active menu-item'>
      <a href='javascript:;'>網(wǎng)站測速</a>
    </li>
    <li class='menu-item'>
      <a href='javascript:;'>網(wǎng)站診斷</a>
    </li>
    <li class='menu-item'>
      <a href='javascript:;'>路由追蹤</a>
    </li>
    <li class='menu-item'>
      <a href='javascript:;'>關(guān)于我們</a>
    </li>
  </ul>

ul的class屬性值為menu，它是導(dǎo)航菜單的容器。

li為菜單項，其class屬性值為menu-item。

CSS

ul.menu設(shè)置導(dǎo)航容器的樣式：位置(position)、盒子陰影(box-shadow)、背景、顯示方式等樣式。

.menu {
  position: relative;
  box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
  background: black;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.25em;
  font-size: 1.5em;
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: inline-block;
}

.menu-item 設(shè)置菜單項的位置、背景等樣式。

.menu li:nth-child(1) {
  background: #22267b;
}
.menu .menu-item {
  position: relative;
  z-index: 1;
}

JavaScript

本示例用到JavaScript編程，主要是實現(xiàn)點擊菜單的動作事件。

  // 初始化
  window.magicLine = new magicLine(document.querySelector('.menu'));

  ref = document.querySelectorAll('.menu-item a');
  // 點擊
  for (i = 0, len = ref.length; i < len; i++) {
    a = ref[i];
    a.addEventListener('click', function(e) {
      var ref1;
      e.preventDefault();
      if ((ref1 = document.querySelector('.menu-item.active')) != null) {
        ref1.classList.remove('active');
      }
      this.parentNode.classList.add('active');
      return window.magicLine.update();
    });
  }

總結(jié)

本文介紹了一款漂亮的CSS3藍色垂直導(dǎo)航菜單，喜歡的朋友請收藏本頁，也可以直接下載源碼備用。

相關(guān)文章

• 二級菜單水平方向排列的CSS3響應(yīng)式水平導(dǎo)航菜單
• 含二級下拉菜單的CSS3響應(yīng)式水平導(dǎo)航菜單
• CSS3 PC/移動響應(yīng)式網(wǎng)頁水平導(dǎo)航菜單
• 常見的簡單大方的純CSS3水平下拉導(dǎo)航菜單
• CSS+JS實現(xiàn)可伸縮可折疊的左邊側(cè)欄項目導(dǎo)航菜單
• 純CSS實現(xiàn)二級導(dǎo)航菜單(具有伸縮過渡效果)
• 漂亮的左側(cè)二級導(dǎo)航菜單(伸縮式)【演示/源碼下載】
• 3款有下橫線平滑過渡效果的導(dǎo)航欄菜單
• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計
• 簡單實用的響應(yīng)式導(dǎo)航菜單設(shè)計
• CSS3實現(xià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)航欄【演示/源碼】

標(biāo)簽: css3  導(dǎo)航欄  導(dǎo)航菜單  目錄導(dǎo)航  移動菜單  菜單  垂直導(dǎo)航菜單