近20個絢麗實用的jQuery/CSS3側(cè)邊欄菜單
jQuery作為一款主流的JavaScript前端開發(fā)框架，深受廣告開發(fā)者的親睞，同時jQuery有著不計其數(shù)的插件，特別是菜單插件更為豐 富，本文將要為大家介紹20個絢麗而實用的jQuery側(cè)邊欄菜單，這些側(cè)邊欄菜單可以用在不同風(fēng)格的網(wǎng)頁上，如果你覺得不錯，也可以進入其下載頁面下載 菜單源代碼。
1、jQuery 3D 垂直多級菜單 可篩選菜單項
這是一款手風(fēng)琴樣式的垂直多級菜單，其特點是利用CSS3特性讓菜單外觀顯得3D立體的效果，同時你也可以在搜索框中輸入關(guān)鍵字來篩選菜單項。
2、CSS3手機端側(cè)滑菜單 4種滑動菜單特效
這是一款基于CSS3的手機端側(cè)滑菜單，一共有4種側(cè)滑動畫特效。這款CSS3菜單的特點是鼠標劃過時即可以各種動畫方式展開和隱藏菜單項，該動畫方式由CSS3中的transition-delay屬性來完成，具體效果大家可以看演示。
3、純CSS3垂直菜單 菜單項滑動動畫
這款CSS3菜單的特點是菜單項有一個非常特別的背景，并且背景可隨著鼠標滑過而滑動，挺有創(chuàng)意的滑動動畫。這款CSS3菜單是垂直樣式的，很適合做網(wǎng)頁的側(cè)邊欄菜單。
4、jQuery左側(cè)帶小圖標的多級下拉菜單
今天我們要來分享一款很不錯的jQuery左側(cè)帶小圖標的多級下拉菜單，菜單是垂直的，每一個菜單項帶有一個小圖標，看起來非常專業(yè)。并且菜單支持無限極下拉，所以對各位Web開發(fā)者來說非常實用。菜單時基于jQuery的，所以基本可以支持所有的瀏覽器。
5、CSS3帶小圖標垂直下拉菜單
這是一款效果非常不錯的CSS3垂直下拉菜單，菜單左側(cè)是每一個菜單項的功能小圖標，右側(cè)也可以定義一些數(shù)字小圖標，并且在菜單項最右側(cè)是tooltip的樣式。另外，當鼠標滑過菜單項時將會改變菜單的背景顏色，其中的圓角效果由簡單的CSS3屬性完成。
6、jQuery多層級垂直手風(fēng)琴菜單
這款手風(fēng)琴菜單是多層級的，你可以通過HTML結(jié)構(gòu)生成任意層級的菜單。由于是基于jQuery的，因此這款手風(fēng)琴菜單的兼容性還不錯。
7、CSS3垂直圖標菜單 帶Tooltip提示框
今天我們要來分享一款CSS3菜單，菜單外觀很漂亮，是垂直排列的小圖標，鼠標滑過菜單項時，菜單項的背景會填充漸變的顏色，另外還會彈出該菜單項描述的Tooltip提示框。之前我們也分享過很多CSS3垂直菜單，像這款CSS3二級下拉動畫菜單 菜單背景滑動動畫、純CSS3垂直動畫菜單等都是非常不錯的CSS3垂直菜單按鈕。
8、CSS3手風(fēng)琴下拉菜單 支持多菜單展開
這又是款基于CSS3的下拉菜單，這款CSS3菜單是手風(fēng)琴樣式的，今天的這款CSS3手風(fēng)琴菜單也類似，菜單具有3種模式，一種是同時展開多個菜單，一種是只能同時展開一個菜單，還有一種是可以默認展開一個菜單。應(yīng)該說，這款CSS3手風(fēng)琴菜單非常的實用。
9、HTML5/CSS3仿Google Play垂直菜單
這款CSS3菜單也是垂直菜單，是一款仿Google Play的垂直菜單，另外菜單左側(cè)還有非常漂亮的小圖標。
10、CSS3手風(fēng)琴菜單 可同時折疊多個菜單
這次分享的CSS3手風(fēng)琴菜單可以同時折疊展開多個菜單項，菜單整體是黑色的風(fēng)格，并且在每一個菜單項上都有很漂亮的小圖標，小圖標像是嵌入在里面一樣很有質(zhì)感。
#p#
11、CSS3垂直手風(fēng)琴折疊菜單
這款CSS3垂直手風(fēng)琴折疊菜單也非常不錯，這款CSS3手風(fēng)琴菜單的每一個菜單項都有小圖標，而且只能有一項展開，更有意思的是，在菜單折疊和展開式右側(cè)的箭頭也會有不錯的動畫效果。
12、純CSS3垂直動畫菜單 效果很酷
今天我們來分享一款CSS3垂直菜單，這款垂直菜單不僅有漂亮的小圖標，而且鼠標滑過時還有非?？岬腃SS3動畫，大家可以試試這款CSS3垂直菜單。
13、CSS3二級下拉動畫菜單 菜單背景滑動動畫
這款CSS3菜單的特點是在菜單展開時，菜單的背景會出現(xiàn)滑動的動畫效果。
14、jQuery/CSS3帶未讀提醒的垂直菜單
這是一款基于jQuery和CSS3的垂直動畫菜單，這款jQuery菜單的特點是菜單整體懸浮在一張大氣的背景圖片上，很有立體的視覺效果。其次這款菜單帶有信箱未讀提醒，并且不斷地閃爍來提示用戶打開郵件箱check郵件。
15、jQuery/CSS3可折疊側(cè)邊欄菜單
這次我們要分享的一款很棒的jQuery菜單插件，這款菜單插件是可折疊的側(cè)邊欄菜單，菜單的特點是點擊按鈕可以展開和折疊菜單，并伴隨動畫效果。而且每一個菜單項都有一個小圖標，非常清新漂亮。當然折疊的效果需要CSS3的支持。
16、jQuery仿Google Nexus菜單樣式插件
這是一款基于jQuery和CSS3的多功能菜單，菜單樣式是仿Google Nexus的，菜單整體看上去是一個封閉的結(jié)構(gòu)，也就是說既有水平菜單，也有垂直菜單，而且每一個菜單項的左側(cè)都有一個漂亮的小圖標，是一款外觀非常不錯的jQuery菜單導(dǎo)航。
17、清新小圖標的HTML5/CSS3側(cè)邊欄菜單
這款CSS3側(cè)邊欄菜單和之前這款菜單類似，也帶有漂亮可愛的小圖標，鼠標滑過菜單項時背景會出現(xiàn)淡入淡出的效果。
18、CSS3垂直菜單 菜單有立體動畫視覺
這款基于CSS3的垂直菜單實現(xiàn)很簡單，該CSS3垂直菜單有幾個特點：
-
菜單外觀呈立體視覺效果，非常有質(zhì)感
-
鼠標滑過菜單項時，菜單項會出現(xiàn)伸縮動畫。
19、CSS3手風(fēng)琴菜單 下拉展開帶彈性動畫
這款是CSS3手風(fēng)琴菜單，菜單項在展開和收縮的時候菜單項會有彈性動畫效果。每一層父級菜單有一個小三角，菜單項在展開的時候這個小三角也會出現(xiàn)動畫，非常酷。
以上這些jQuery側(cè)邊欄菜單是不是對你有所幫助，歡迎你的評價。
