技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運營

贊助商

分類目錄

贊助商

最新文章

搜索

一款簡易的CSS3側(cè)欄滑動導(dǎo)航菜單

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

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

效果圖

 一款簡易的CSS3側(cè)欄滑動導(dǎo)航菜單

demodownload

示例介紹

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

  • 點擊左上角三橫圖標時,導(dǎo)航從側(cè)邊滑出(有漸變動畫效果)。
  • 點擊左上角叉圖標時,導(dǎo)航向側(cè)邊縮進消失(有漸變動畫效果)。
  • 鼠標移到菜單名稱上時,菜單名稱字體顏色發(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>

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

CSS

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

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

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

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

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

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

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

JavaScript

該示例用到一點JavaScript編程,主要是實現(xiàn)導(dǎo)航的打開關(guā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');
})

總結(jié)

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

相關(guān)文章

x
  • 站長推薦
/* 左側(cè)顯示文章內(nèi)容目錄 */