近20個絢麗實用的jQuery/CSS3側邊欄菜單

jQuery作為一款主流的JavaScript前端開發框架，深受廣告開發者的親睞，同時jQuery有著不計其數的插件，特別是菜單插件更為豐富，本文將要為大家介紹20個絢麗而實用的jQuery側邊欄菜單，這些側邊欄菜單可以用在不同風格的網頁上，如果你覺得不錯，也可以進入其下載頁面下載菜單源代碼。

1、jQuery 3D 垂直多級菜單 可篩選菜單項

這是一款手風琴樣式的垂直多級菜單，其特點是利用CSS3特性讓菜單外觀顯得3D立體的效果，同時你也可以在搜索框中輸入關鍵字來篩選菜單項。

在線演示 源碼下載

2、CSS3手機端側滑菜單 4種滑動菜單特效

這是一款基於CSS3的手機端側滑菜單，一共有4種側滑動畫特效。這款CSS3菜單的特點是滑鼠划過時即可以各種動畫方式展開和隱藏菜單項，該動畫方式由CSS3中的transition-delay屬性來完成，具體效果大家可以看演示。

在線演示1 在線演示2 在線演示3 在線演示4 源碼下載

3、純CSS3垂直菜單 菜單項滑動動畫

這款CSS3菜單的特點是菜單項有一個非常特別的背景，並且背景可隨著滑鼠滑過而滑動，挺有創意的滑動動畫。這款CSS3菜單是垂直樣式的，很適合做網頁的側邊欄菜單。

在線演示 源碼下載

4、jQuery左側帶小圖標的多級下拉菜單

今天我們要來分享一款很不錯的jQuery左側帶小圖標的多級下拉菜單，菜單是垂直的，每一個菜單項帶有一個小圖標，看起來非常專業。並且菜單支持無限極下拉，所以對各位Web開發者來說非常實用。菜單時基於jQuery的，所以基本可以支持所有的瀏覽器。

在線演示 源碼下載

5、CSS3帶小圖標垂直下拉菜單

這是一款效果非常不錯的CSS3垂直下拉菜單，菜單左側是每一個菜單項的功能小圖標，右側也可以定義一些數字小圖標，並且在菜單項最右側是tooltip的樣式。另外，當滑鼠滑過菜單項時將會改變菜單的背景顏色，其中的圓角效果由簡單的CSS3屬性完成。

在線演示 源碼下載

6、jQuery多層級垂直手風琴菜單

這款手風琴菜單是多層級的，你可以通過HTML結構生成任意層級的菜單。由於是基於jQuery的，因此這款手風琴菜單的兼容性還不錯。

在線演示 源碼下載

7、CSS3垂直圖標菜單 帶Tooltip提示框

今天我們要來分享一款CSS3菜單，菜單外觀很漂亮，是垂直排列的小圖標，滑鼠滑過菜單項時，菜單項的背景會填充漸變的顏色，另外還會彈出該菜單項描述的Tooltip提示框。之前我們也分享過很多CSS3垂直菜單，像這款CSS3二級下拉動畫菜單 菜單背景滑動動畫、純CSS3垂直動畫菜單等都是非常不錯的CSS3垂直菜單按鈕。

在線演示 源碼下載

8、CSS3手風琴下拉菜單 支持多菜單展開

這又是款基於CSS3的下拉菜單，這款CSS3菜單是手風琴樣式的，今天的這款CSS3手風琴菜單也類似，菜單具有3種模式，一種是同時展開多個菜單，一種是只能同時展開一個菜單，還有一種是可以默認展開一個菜單。應該說，這款CSS3手風琴菜單非常的實用。

在線演示 源碼下載

9、HTML5/CSS3仿Google Play垂直菜單

這款CSS3菜單也是垂直菜單，是一款仿Google Play的垂直菜單，另外菜單左側還有非常漂亮的小圖標。

在線演示 源碼下載

10、CSS3手風琴菜單 可同時摺疊多個菜單

這次分享的CSS3手風琴菜單可以同時摺疊展開多個菜單項，菜單整體是黑色的風格，並且在每一個菜單項上都有很漂亮的小圖標，小圖標像是嵌入在裡面一樣很有質感。

在線演示 源碼下載

11、CSS3垂直手風琴摺疊菜單

這款CSS3垂直手風琴摺疊菜單也非常不錯，這款CSS3手風琴菜單的每一個菜單項都有小圖標，而且只能有一項展開，更有意思的是，在菜單摺疊和展開式右側的箭頭也會有不錯的動畫效果。

在線演示 源碼下載

12、純CSS3垂直動畫菜單 效果很酷

今天我們來分享一款CSS3垂直菜單，這款垂直菜單不僅有漂亮的小圖標，而且滑鼠滑過時還有非常酷的CSS3動畫，大家可以試試這款CSS3垂直菜單。

在線演示 源碼下載

13、CSS3二級下拉動畫菜單 菜單背景滑動動畫

這款CSS3菜單的特點是在菜單展開時，菜單的背景會出現滑動的動畫效果。

在線演示 源碼下載

14、jQuery/CSS3帶未讀提醒的垂直菜單

這是一款基於jQuery和CSS3的垂直動畫菜單，這款jQuery菜單的特點是菜單整體懸浮在一張大氣的背景圖片上，很有立體的視覺效果。其次這款菜單帶有信箱未讀提醒，並且不斷地閃爍來提示用戶打開郵件箱check郵件。

在線演示 源碼下載

15、jQuery/CSS3可摺疊側邊欄菜單

這次我們要分享的一款很棒的jQuery菜單插件，這款菜單插件是可摺疊的側邊欄菜單，菜單的特點是點擊按鈕可以展開和摺疊菜單，並伴隨動畫效果。而且每一個菜單項都有一個小圖標，非常清新漂亮。當然摺疊的效果需要CSS3的支持。

在線演示 源碼下載

16、jQuery仿Google Nexus菜單樣式插件

這是一款基於jQuery和CSS3的多功能菜單，菜單樣式是仿Google Nexus的，菜單整體看上去是一個封閉的結構，也就是說既有水平菜單，也有垂直菜單，而且每一個菜單項的左側都有一個漂亮的小圖標，是一款外觀非常不錯的jQuery菜單導航。

在線演示 源碼下載

17、清新小圖標的HTML5/CSS3側邊欄菜單

這款CSS3側邊欄菜單和之前這款菜單類似，也帶有漂亮可愛的小圖標，滑鼠滑過菜單項時背景會出現淡入淡出的效果。

在線演示 源碼下載

18、CSS3垂直菜單 菜單有立體動畫視覺

這款基於CSS3的垂直菜單實現很簡單，該CSS3垂直菜單有幾個特點：

1. 菜單外觀呈立體視覺效果，非常有質感
2. 滑鼠滑過菜單項時，菜單項會出現伸縮動畫。

在線演示 源碼下載

19、CSS3手風琴菜單 下拉展開帶彈性動畫

這款是CSS3手風琴菜單，菜單項在展開和收縮的時候菜單項會有彈性動畫效果。每一層父級菜單有一個小三角，菜單項在展開的時候這個小三角也會出現動畫，非常酷。

在線演示 源碼下載

以上這些jQuery側邊欄菜單是不是對你有所幫助，歡迎你的評價。

本文鏈接：http://www.codeceo.com/article/20-jquery-css3-side-menu.html

本文作者：小峰

[ 原創作品，轉載必須在正文中標註並保留原文鏈接和作者等信息。]

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！