无码专区在线观看,a在线亚洲男人的天堂试看

技術頻道 - html技術

一款簡易的CSS3側欄滑動導航菜單

作者:admin 時間:2023-5-11 21:51:59 瀏覽:

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

效果圖

一款簡易的CSS3側欄滑動導航菜單

demo download

示例介紹

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

點擊左上角三橫圖標時，導航從側邊滑出（有漸變動畫效果）。
點擊左上角叉圖標時，導航向側邊縮進消失（有漸變動畫效果）。
鼠標移到菜單名稱上時，菜單名稱字體顏色發(fā)生變化。

HTML代碼

下面是本示例的HTML代碼結構。

<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">關于我們</a>
    <a href="#" class="link">聯(lián)系方式</a>
  </div>
</nav>

外層標簽是nav，里面有兩個div，第一個div是圖標按鈕（三橫和叉），第二個div是菜單項目列舉。

CSS

.menu-btn 設置圖標按鈕的樣式。

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

.menu-btn 設置圖標按鈕的樣式

.nav-links.fade-in 設置導航容器透明度，并且設置它的轉換動畫。

.nav-links 是設置導航容器的位置、高寬等樣式，還設置了過渡動畫。

nav .nav-links.fade-in {
  opacity: 1;
  transform: translateX(0px); /* 轉換動畫  */
}
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);  /* 轉換動畫  */
  opacity: 0;
  transition: all 900ms cubic-bezier(.9, 0, .33, 1);  /* 過渡動畫  */
}

JavaScript

該示例用到一點JavaScript編程，主要是實現(xiàn)導航的打開關閉圖標的切換。

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');
})

總結

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

相關文章