36個引人注目的導航菜單(上)

導航菜單在任何網站中都佔有舉足輕重的地位。對於充滿了大量頁面與文章的大型網站來說,下拉菜單于選項卡菜單非常受歡迎,這是因爲用戶可以通過他們 輕鬆的瀏覽網站,同時運用動態的選項卡顯示內容能節省網站大量的空間。加入你也想創建一個屬於自己的與衆不同導航菜單的話,jQuery是提供一套定製選 項的正確選擇。這就是爲什麼我想大家推薦36個jquery導航菜單實例的原因。

 

1.jQuery 選項卡界面 / 選項卡結構菜單教程

這種類型的菜單在網頁設計與開發中非常著 名的。此片教程是向大家展示如何使用jQuery的向下滑動/向上滑動效果創建屬於你自己的選項卡菜單。要非常留心此演示喲,你一定會喜歡上它的。

jquery-tabbed-interface

Preview || Download

2.效果生動逼真的jQuery菜單

學習如何使用簡易的XHTML/CSS/JS創建令人驚奇的效 果生動逼真的菜單,類似 Dragon Interactive (dragoninteractive.com).

jquery-animated-menu

Preview || Download

3. 使用CSS和jQuery創建非常Cool的動畫效果導航 (教程 + 下載)

動畫及視覺反 饋是幫助用戶在瀏覽和網站與網站互動的有效手段。雖然傳統的Adobe的Flash是可以完成各種動畫效果的,但是最近使用JavaScript的魔法, 我們可以完全避免使用flash。

jquery-navigation-slide

Preview || Download

4.jQuery目錄導航插件

這個jQuery插件爲我們提供了添加基於字母順序的導航小部件到有 序和無序列表的方法。一個在列表之上的簡易的(viaCSS)導航條,向用戶展示從A到Z的檢索。通過從列表中選擇一個字母來顯示以此字母開頭的所有元 素。在可選字母上面顯示的計數,是表明當你點擊此字母的時候會有多少項目被現實。除此之外還有其他的基本功能可供選擇。

jquery-list-nav

Preview || Download

5. jqDock 菜單

變換圖標模仿mac的Dock菜單, 水平或者垂直,以圖標擴大過渡可選的標籤。

jqdock-jquery-plugin-menu

Preview || Download

6.Jquery滑動菜單

這篇教程是像我們講解與下載jquery 滑動菜單,你可以在PSDtuts網頁右上角 查看效果。

jquery-sliding-menu-tutplus

This is how looks finished demo version:

vertical-sliding-menu

Preview || Download

7.CSS 精靈 2 - 是JavaScript的時間

css-sprites-2-jquery

Preview

8. CSS Mac Dock 菜單

如果你是Mac深度中毒者,你會愛上我設計的這個CSS dock菜單。他使用了Jquery Javascript庫和Fisheye部件界面以及我的一些圖標。它有兩種停靠風格-上端與下端。這個菜單加入到我的ITHEME中非常好。

css-dock-menu-jquery

Preview || Download

9.jQuery的Kwicks菜單

Kwicks起源於Mootools中的一個效果(相同名 字),逐漸演變成一個高度可定製的通用部件.

kwicks-jquery-menu-navigation

7 Examples || Download

10.Jquery文件樹

jQuery文件樹是一個可配置的, AJAX的文件瀏覽器jQuery插件。您可以只用一行JavaScript代碼創建一個定製的,完全互動的文件樹。目前,服務器端連接器的腳本支持 PHP, ASP, ASP.NET,JSP, 與Lasso。如果您是開發人員,可以輕鬆地使用所選語言創建自己的連接。

jquery-file-tree-navigation

Preview || Download

11.學習jQuery: 褪色菜單 -更換內容

CSS-tricks上很好的教程,講解如何使用 css和jQuery, 這次是他們教導如何使用 jquery 使得菜單選項褪色。

menu-fader-jquery-navigation

Preview || Download

12. 如何使用jQuery創建順滑生動的菜單

曾經見過一些優秀的jQuery導航,你有想自己創 建一個的衝動麼? 這篇教程是教你怎樣建立擁有順暢動畫效果的菜單。

smooth-animated-jquery-menu

Preview || Download

13.Create Vimeo-like top navigation

學習如何創建像 Vimeo網站的導航菜單 ,雖然只用了xhtml,css used,但是我仍然想包含他。

create-vimeo-like-top-navigation

Preview + Vimeo site || Download

14. jQuery (mb)菜單 2.3

這是一個強大的jQuery 部件,輕鬆創建更加直觀的多級樹形菜單或者繼承菜單 (右擊)!

你可以添加許多子菜單;如果子菜單或者菜單在頁面中沒有聲明,組件會通過 AJAX通過調取菜單中的模板頁ID來獲取。你需要的(菜單屬性值)ajax頁面會返回並作爲下面的菜單實例而格式化代碼。

 

jquery-mb-menu-navigation

Preview || Download

15. Coda 滑動菜單

coda-slider-jquery

Preview || Download

16. jQuery idTabs

idTabs是jQuery的插件。他能非常容易的爲網站添加選項卡. 但是他也爲無窮的可能性敞開大門。

idtabs-jquery-navigation

Preview || Download

17. 使用CSS & jQuery創建順暢的選顯卡內容區

網頁設計師設法把大量的信息濃 縮在一個網頁上而不失可用性是最大的挑戰之一。內容選項卡化是處理此類問題非常棒的方法,最近廣泛被應用於博客。這是一篇非常棒的教程講解,使用HTML 建立一個小的選項卡信息盒,最後使用一些簡單js功能與jQuery庫實現。

slick-tabbed-content-area-css-jquery

Preview

18. 爲jQuery愛好者準備的熔岩燈!

輕量級Lavalamp菜單通過令人驚奇的jQuery javascript 庫封裝成的插件.

lava-lamp-jquery-navigation

Preview || Download

 

英文原文:36 Eye-Catching Jquery Navigation Menus

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章