近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側邊欄選單是不是對你有所幫助，歡迎你的評價。