卡卡網(wǎng)

今天介紹一款CSS實(shí)現(xiàn)的漂亮的側(cè)欄（圖標(biāo)+文字）樣式設(shè)計(jì)。

demodownload

實(shí)例簡(jiǎn)介

側(cè)欄顯示圖標(biāo)+文字的設(shè)計(jì)方式，點(diǎn)擊項(xiàng)目時(shí)，圖標(biāo)有一個(gè)動(dòng)畫(huà)效果。

本實(shí)例使用CSS+SVG+JavaScript來(lái)實(shí)現(xiàn)。

CSS設(shè)計(jì)樣式，SVG設(shè)計(jì)圖標(biāo)，JavaScript實(shí)現(xiàn)圖標(biāo)過(guò)渡動(dòng)畫(huà)效果。

HTML

下面是側(cè)欄一個(gè)項(xiàng)目的代碼結(jié)構(gòu)。

<button class="home">
  <div>
    <div class="icon">
      <svg viewBox="0 0 24 24">
        <path class="outline" d="......" />
        <path class="triangle" d="......" />
      </svg>
    </div>
    主頁(yè)
  </div>
</button>

外面是一個(gè)button標(biāo)簽的盒子，第二層是一個(gè)div，該div內(nèi)含項(xiàng)目名稱(chēng)和一個(gè)class=icon的div——這個(gè)div是項(xiàng)目圖標(biāo)容器，圖標(biāo)是使用SVG畫(huà)出來(lái)的。

CSS

CSS設(shè)計(jì)button、div、svg等樣式。

通過(guò)CSS可輕松修改側(cè)欄的寬度。

aside {
  width: 180px; 
  border-radius: 24px;
  padding: 40px;
  background: var(--c-sidebar);
}

width: 180px; 是側(cè)欄寬度定義。

JavaScript

本實(shí)例JavaScript需引用兩個(gè)JS庫(kù)文件（文件包含在源碼壓縮包內(nèi)）。

<script src='gsap.min.js'></script>
<script src='MorphSVGPlugin3.min.js'></script>

JavaScript實(shí)現(xiàn)SVG動(dòng)畫(huà)，當(dāng)鼠標(biāo)點(diǎn)擊項(xiàng)目時(shí)，該項(xiàng)目的圖標(biāo)顯示一個(gè)過(guò)渡動(dòng)畫(huà)效果。

總結(jié)

本文介紹了一款CSS實(shí)現(xiàn)的漂亮的側(cè)欄（圖標(biāo)+文字）樣式設(shè)計(jì)，使用CSS+SVG+JavaScript來(lái)實(shí)現(xiàn)，代碼較為復(fù)雜，不過(guò)效果相當(dāng)不錯(cuò)，喜歡的朋友可以直接下載源碼使用。

您可能對(duì)以下文章也感興趣

• 欄目/目錄導(dǎo)航菜單(水平橫向)
• jQuery實(shí)現(xiàn)的水平可滾動(dòng)導(dǎo)航菜單

相關(guān)文章

• 純CSS實(shí)現(xiàn)的上下滑動(dòng)翻頁(yè)【演示/源碼下載】
• CSS 3D滑塊動(dòng)畫(huà)效果(水平或垂直方向無(wú)限循環(huán)滾動(dòng))
• 一組精致好看的CSS表單樣式：checkbox、radio、text等
• 純CSS+SVG創(chuàng)建有趣的動(dòng)畫(huà)復(fù)選框checkbox
• 一個(gè)具有鼠標(biāo)懸停動(dòng)畫(huà)效果的SVG復(fù)選框checkbox
• 8款SVG創(chuàng)建的動(dòng)畫(huà)checkbox多選框和radio單選框
• CSS示例：漂亮的切換開(kāi)關(guān)（toggle switches）樣式
• 純CSS：兩個(gè)非常漂亮的checkbox和radio按鈕樣式
• 使用SVG實(shí)現(xiàn)的漂亮的復(fù)選框（checkbox）樣式
• 兩例純CSS樣式：?jiǎn)芜xradio/復(fù)選checkbox按鈕

標(biāo)簽: css  側(cè)欄