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

2015-10-10    分類:WEB開發、程式設計開發、首頁精華9人評論發表於2015-10-10

本文由碼農網 – 小峰原創,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃

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

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

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

jquery-3d-menu-with-search

線上演示        原始碼下載

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

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

css3-mobile-slider-menu

線上演示1        線上演示2        線上演示3        線上演示4        原始碼下載

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

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

pure-css3-ver-slider-menu

線上演示        原始碼下載

4、jQuery左側帶小圖示的多級下拉選單

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

jquery-side-icon-dropdown-menu

線上演示        原始碼下載

5、CSS3帶小圖示垂直下拉選單

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

css3-dropdown-menu-icon

線上演示        原始碼下載

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

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

jquery-level-accord-menu

線上演示        原始碼下載

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

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

css3-ver-nav-with-icon

線上演示        原始碼下載

8、CSS3手風琴下拉選單 支援多選單展開

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

css3-accord-menu-mult-flip

線上演示        原始碼下載

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

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

css3-google-play-store-menu

線上演示        原始碼下載

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

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

css3-multiple-accordion-menu

線上演示        原始碼下載

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

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

css3-ver-accordion-menu

線上演示        原始碼下載

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

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

pure-css3-vertical-menu

線上演示        原始碼下載

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

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

css3-animation-bg-menu

線上演示        原始碼下載

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

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

jquery-css3-menu-with-inbox

線上演示        原始碼下載

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

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

jquery-css3-slide-menu

線上演示        原始碼下載

16、jQuery仿Google Nexus選單樣式外掛

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

jquery-google-nexus

線上演示        原始碼下載

17、清新小圖示的HTML5/CSS3側邊欄選單

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

html5-css-side-menu-with-icon

線上演示        原始碼下載

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

這款基於CSS3的垂直選單實現很簡單,該CSS3垂直選單有幾個特點:

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

css3-vertical-menu

線上演示        原始碼下載

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

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

css3-accordion-menu

線上演示        原始碼下載

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

本文連結:http://www.codeceo.com/article/20-jquery-css3-side-menu.html
本文作者:碼農網 – 小峰
原創作品,轉載必須在正文中標註並保留原文連結和作者等資訊。]

相關文章