插件描述：該側邊欄在鼠標滑過菜單項時，會以平滑的方式滑出相應的主菜單，就像拉開抽屜的效果，非常的時尚。

側邊欄菜單設計說明

這是一款使用純CSS3制作的抽屜式滑動側邊欄菜單設計效果。該側邊欄在鼠標滑過菜單項時，會以平滑的方式滑出相應的主菜單，就像拉開抽屜的效果，非常的時尚。

制作方法

注意這個側邊欄效果的CSS樣式中沒有使用各個瀏覽器廠商的前綴，所以為了能夠兼容各大瀏覽器，要在頁面中引入prefixfree.min.js文件。

HTML結構

該側邊欄菜單使用無序列表來制作，圖表使用的是font-awesome字體圖標。

•    Home 
  •    About  
  •    Contact  

CSS樣式

首先整個側邊欄設置為絕對定位，top和left都為0，固定在左上角位置。高度為100%屏幕高度，寬度用padding來控制。font-size: 0;用于移除列表項之間的間隙。.drawer {

<

總結

以上是生活随笔為你收集整理的左侧侧拉栏html,侧边抽屉_纯CSS3抽屉式滑动侧边栏菜单设计的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。