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

1、jQuery 3D 垂直多級(jí)菜單 可篩選菜單項(xiàng)

這是一款手風(fēng)琴樣式的垂直多級(jí)菜單，其特點(diǎn)是利用CSS3特性讓菜單外觀顯得3D立體的效果，同時(shí)你也可以在搜索框中輸入關(guān)鍵字來篩選菜單項(xiàng)。

在線演示        源碼下載

2、CSS3手機(jī)端側(cè)滑菜單 4種滑動(dòng)菜單特效

這是一款基于CSS3的手機(jī)端側(cè)滑菜單，一共有4種側(cè)滑動(dòng)畫特效。這款CSS3菜單的特點(diǎn)是鼠標(biāo)劃過時(shí)即可以各種動(dòng)畫方式展開和隱藏菜單項(xiàng)，該動(dòng)畫方式由CSS3中的transition-delay屬性來完成，具體效果大家可以看演示。

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

3、純CSS3垂直菜單 菜單項(xiàng)滑動(dòng)動(dòng)畫

這款CSS3菜單的特點(diǎn)是菜單項(xiàng)有一個(gè)非常特別的背景，并且背景可隨著鼠標(biāo)滑過而滑動(dòng)，挺有創(chuàng)意的滑動(dòng)動(dòng)畫。這款CSS3菜單是垂直樣式的，很適合做網(wǎng)頁的側(cè)邊欄菜單。

在線演示        源碼下載

4、jQuery左側(cè)帶小圖標(biāo)的多級(jí)下拉菜單

今天我們要來分享一款很不錯(cuò)的jQuery左側(cè)帶小圖標(biāo)的多級(jí)下拉菜單，菜單是垂直的，每一個(gè)菜單項(xiàng)帶有一個(gè)小圖標(biāo)，看起來非常專業(yè)。并且菜單支持無限極下拉，所以對(duì)各位Web開發(fā)者來說非常實(shí)用。菜單時(shí)基于jQuery的，所以基本可以支持所有的瀏覽器。

在線演示        源碼下載

5、CSS3帶小圖標(biāo)垂直下拉菜單

這是一款效果非常不錯(cuò)的CSS3垂直下拉菜單，菜單左側(cè)是每一個(gè)菜單項(xiàng)的功能小圖標(biāo)，右側(cè)也可以定義一些數(shù)字小圖標(biāo)，并且在菜單項(xiàng)最右側(cè)是tooltip的樣式。另外，當(dāng)鼠標(biāo)滑過菜單項(xiàng)時(shí)將會(huì)改變菜單的背景顏色，其中的圓角效果由簡(jiǎn)單的CSS3屬性完成。

在線演示        源碼下載

6、jQuery多層級(jí)垂直手風(fēng)琴菜單

這款手風(fēng)琴菜單是多層級(jí)的，你可以通過HTML結(jié)構(gòu)生成任意層級(jí)的菜單。由于是基于jQuery的，因此這款手風(fēng)琴菜單的兼容性還不錯(cuò)。

在線演示        源碼下載

7、CSS3垂直圖標(biāo)菜單 帶Tooltip提示框

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

在線演示        源碼下載

8、CSS3手風(fēng)琴下拉菜單 支持多菜單展開

這又是款基于CSS3的下拉菜單，這款CSS3菜單是手風(fēng)琴樣式的，今天的這款CSS3手風(fēng)琴菜單也類似，菜單具有3種模式，一種是同時(shí)展開多個(gè)菜單，一種是只能同時(shí)展開一個(gè)菜單，還有一種是可以默認(rèn)展開一個(gè)菜單。應(yīng)該說，這款CSS3手風(fēng)琴菜單非常的實(shí)用。

在線演示        源碼下載

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

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

在線演示        源碼下載

10、CSS3手風(fēng)琴菜單 可同時(shí)折疊多個(gè)菜單

這次分享的CSS3手風(fēng)琴菜單可以同時(shí)折疊展開多個(gè)菜單項(xiàng)，菜單整體是黑色的風(fēng)格，并且在每一個(gè)菜單項(xiàng)上都有很漂亮的小圖標(biāo)，小圖標(biāo)像是嵌入在里面一樣很有質(zhì)感。

在線演示        源碼下載

#p#

11、CSS3垂直手風(fēng)琴折疊菜單

這款CSS3垂直手風(fēng)琴折疊菜單也非常不錯(cuò)，這款CSS3手風(fēng)琴菜單的每一個(gè)菜單項(xiàng)都有小圖標(biāo)，而且只能有一項(xiàng)展開，更有意思的是，在菜單折疊和展開式右側(cè)的箭頭也會(huì)有不錯(cuò)的動(dòng)畫效果。

在線演示        源碼下載

12、純CSS3垂直動(dòng)畫菜單 效果很酷

今天我們來分享一款CSS3垂直菜單，這款垂直菜單不僅有漂亮的小圖標(biāo)，而且鼠標(biāo)滑過時(shí)還有非?？岬腃SS3動(dòng)畫，大家可以試試這款CSS3垂直菜單。

在線演示        源碼下載

13、CSS3二級(jí)下拉動(dòng)畫菜單 菜單背景滑動(dòng)動(dòng)畫

這款CSS3菜單的特點(diǎn)是在菜單展開時(shí)，菜單的背景會(huì)出現(xiàn)滑動(dòng)的動(dòng)畫效果。

在線演示        源碼下載

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

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

在線演示        源碼下載

15、jQuery/CSS3可折疊側(cè)邊欄菜單

這次我們要分享的一款很棒的jQuery菜單插件，這款菜單插件是可折疊的側(cè)邊欄菜單，菜單的特點(diǎn)是點(diǎn)擊按鈕可以展開和折疊菜單，并伴隨動(dòng)畫效果。而且每一個(gè)菜單項(xiàng)都有一個(gè)小圖標(biāo)，非常清新漂亮。當(dāng)然折疊的效果需要CSS3的支持。

在線演示        源碼下載

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

這是一款基于jQuery和CSS3的多功能菜單，菜單樣式是仿Google Nexus的，菜單整體看上去是一個(gè)封閉的結(jié)構(gòu)，也就是說既有水平菜單，也有垂直菜單，而且每一個(gè)菜單項(xiàng)的左側(cè)都有一個(gè)漂亮的小圖標(biāo)，是一款外觀非常不錯(cuò)的jQuery菜單導(dǎo)航。

在線演示        源碼下載

17、清新小圖標(biāo)的HTML5/CSS3側(cè)邊欄菜單

這款CSS3側(cè)邊欄菜單和之前這款菜單類似，也帶有漂亮可愛的小圖標(biāo)，鼠標(biāo)滑過菜單項(xiàng)時(shí)背景會(huì)出現(xiàn)淡入淡出的效果。

在線演示        源碼下載

18、CSS3垂直菜單 菜單有立體動(dòng)畫視覺

這款基于CSS3的垂直菜單實(shí)現(xiàn)很簡(jiǎn)單，該CSS3垂直菜單有幾個(gè)特點(diǎn)：

1. 菜單外觀呈立體視覺效果，非常有質(zhì)感

2. 鼠標(biāo)滑過菜單項(xiàng)時(shí)，菜單項(xiàng)會(huì)出現(xiàn)伸縮動(dòng)畫。

在線演示        源碼下載

19、CSS3手風(fēng)琴菜單 下拉展開帶彈性動(dòng)畫

這款是CSS3手風(fēng)琴菜單，菜單項(xiàng)在展開和收縮的時(shí)候菜單項(xiàng)會(huì)有彈性動(dòng)畫效果。每一層父級(jí)菜單有一個(gè)小三角，菜單項(xiàng)在展開的時(shí)候這個(gè)小三角也會(huì)出現(xiàn)動(dòng)畫，非常酷。

在線演示        源碼下載

以上這些jQuery側(cè)邊欄菜單是不是對(duì)你有所幫助，歡迎你的評(píng)價(jià)。