卡卡網(wǎng)

前面介紹過一款很漂亮的 Bootstrap 3 側(cè)欄滑動(dòng)導(dǎo)航菜單，不過其用到插件比較多，用起來較復(fù)雜，本文將給大家介紹一款簡易的CSS3側(cè)欄滑動(dòng)導(dǎo)航菜單，代碼少，無需用到任何JS或CSS插件。

效果圖

demodownload

示例介紹

本示例用CSS3實(shí)現(xiàn)。

• 點(diǎn)擊左上角三橫圖標(biāo)時(shí)，導(dǎo)航從側(cè)邊滑出（有漸變動(dòng)畫效果）。
• 點(diǎn)擊左上角叉圖標(biāo)時(shí)，導(dǎo)航向側(cè)邊縮進(jìn)消失（有漸變動(dòng)畫效果）。
• 鼠標(biāo)移到菜單名稱上時(shí)，菜單名稱字體顏色發(fā)生變化。

HTML代碼

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

<nav>
  <div class="menu-btn">
    <div class="line line--1"></div>
    <div class="line line--2"></div>
    <div class="line line--3"></div>
  </div>
  <div class="nav-links">
    <a href="#" class="link">首頁</a>
    <a href="#" class="link">產(chǎn)品展示</a>
    <a href="#" class="link">關(guān)于我們</a>
    <a href="#" class="link">聯(lián)系方式</a>
  </div>
</nav>

外層標(biāo)簽是nav，里面有兩個(gè)div，第一個(gè)div是圖標(biāo)按鈕（三橫和叉），第二個(gè)div是菜單項(xiàng)目列舉。

CSS

.menu-btn 設(shè)置圖標(biāo)按鈕的樣式。

nav .menu-btn {
  position: absolute;
  top: 10%;
  right: 5%;
  padding: 0;
  width: 30px;
  cursor: pointer;
  z-index: 2;
}

.nav-links.fade-in 設(shè)置導(dǎo)航容器透明度，并且設(shè)置它的轉(zhuǎn)換動(dòng)畫。

.nav-links 是設(shè)置導(dǎo)航容器的位置、高寬等樣式，還設(shè)置了過渡動(dòng)畫。

nav .nav-links.fade-in {
  opacity: 1;
  transform: translateX(0px); /* 轉(zhuǎn)換動(dòng)畫  */
}
nav .nav-links {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateX(-100px);  /* 轉(zhuǎn)換動(dòng)畫  */
  opacity: 0;
  transition: all 900ms cubic-bezier(.9, 0, .33, 1);  /* 過渡動(dòng)畫  */
}

JavaScript

該示例用到一點(diǎn)JavaScript編程，主要是實(shí)現(xiàn)導(dǎo)航的打開關(guān)閉圖標(biāo)的切換。

var menuBtn = document.querySelector('.menu-btn');
var nav = document.querySelector('nav');
var lineOne = document.querySelector('nav .menu-btn .line--1');
var lineTwo = document.querySelector('nav .menu-btn .line--2');
var lineThree = document.querySelector('nav .menu-btn .line--3');
var link = document.querySelector('nav .nav-links');
menuBtn.addEventListener('click', () => {
    nav.classList.toggle('nav-open');
    lineOne.classList.toggle('line-cross');
    lineTwo.classList.toggle('line-fade-out');
    lineThree.classList.toggle('line-cross');
    link.classList.toggle('fade-in');
})

總結(jié)

本文介紹了一款簡易的CSS3側(cè)欄滑動(dòng)導(dǎo)航菜單，代碼少，不用引用第三方插件，用起來很方便。該示例在從側(cè)欄滑出和縮進(jìn)時(shí)有一個(gè)漸變過渡動(dòng)畫，此效果是該示例的點(diǎn)睛之作，喜歡的朋友可以收藏本頁，或直接下載源碼備用。

相關(guān)文章

• 很漂亮的 Bootstrap 3 側(cè)欄滑動(dòng)導(dǎo)航菜單【演示/源碼下載】
• 一款漂亮的CSS3藍(lán)色垂直導(dǎo)航菜單
• 二級(jí)菜單水平方向排列的CSS3響應(yīng)式水平導(dǎo)航菜單
• 含二級(jí)下拉菜單的CSS3響應(yīng)式水平導(dǎo)航菜單
• 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)航欄菜單

• 非常漂亮的響應(yīng)式導(dǎo)航欄設(shè)計(jì)
• 簡單實(shí)用的響應(yīng)式導(dǎo)航菜單設(shè)計(jì)
• 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)航
• 側(cè)邊/左側(cè)目錄導(dǎo)航隨內(nèi)容滾動(dòng)而變化
• 純CSS：非常漂亮的左側(cè)導(dǎo)航/內(nèi)容目錄導(dǎo)航
• 簡單卻實(shí)用的CSS水平和垂直導(dǎo)航欄【演示/源碼】

標(biāo)簽: css3  側(cè)欄導(dǎo)航  導(dǎo)航欄  導(dǎo)航菜單  移動(dòng)菜單  菜單