jQuery實現精美的多層下拉式選單特效_jquery

這是一款精美的多層下拉式選單美化,可以完美地取代「select」來實現下拉式選單的效果。而且支援多層選單，有載入等待效果，有層級分類展示。

複製程式碼 程式碼如下: ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > http://www.w3.org/1999/xhtml" xml:lang="en">

長絲組實驗室 腳本>

正文 { 字體大小：62.5%；保證金：0；填充：0； } #menuLog { 字體大小：1.4em;邊距：20px； } .hidden { 位置：絕對；上：0；左：-9999px；寬度：1px；高度：1px；溢出：隱藏； } .fg-button { 清除：左；邊距：0 4px 40px 450px；填充：.4em 1em；文字裝飾：無！重要；遊標：指標；位置：相對；文字對齊：居中；縮放：1； } .fg-button .ui-icon { 位置：絕對；上：50%；上邊距：-8px；左：50%；左邊距：-8px； } a.fg-button { 浮動：左； } 按鈕.fg-按鈕{寬度：自動;溢位：可見； } /* 刪除 IE 中額外的按鈕寬度 */ .fg-button-icon-left { padding-left: 2.1em; } .fg-button-icon-right { padding-right: 2.1em; } .fg-button-icon-left .ui-icon { 右：自動；左：.2em；左邊距：0； } .fg-button-icon-right .ui-icon { 左：自動；右：.2em；左邊距：0； } .fg-button-icon-solo { 顯示：塊；寬度：8px；文字縮排：-9999px； } /* 單獨的圖示按鈕必須具有區塊屬性才能使文字縮排作用 */ .fg-button.ui-state-loading .ui-icon { 背景：url(spinner_bar.gif) no-repeat 0 0; } .fg-menu-ipod .fg-menu li { 寬度：95%； } .fg-menu-ipod .ui-widget-content { 邊框：0; } $(函數(){ // 按鈕 $('.fg-button').hover( function(){ $(this).removeClass('ui-state-default').addClass('ui-state-focus'); }, function(){ $(this).removeClass('ui-state-focus').addClass('ui-state-default'); } ); // 選單 $('#flat').menu({ content: $('#flat').next().html(), // 從此頁面擷取內容 顯示速率：400 }); $('#hierarchy').menu({ 內容：$('#hierarchy').next().html(), crumbDefaultText: ' ' }); $('#hierarchybreadcrumb').menu({ 內容：$('#hierarchybreadcrumb').next().html(), 反向連結： false }); // 或來自外在來源 $.get('menuContent.html', function(data){ // 從另一頁抓取內容 $('#flyout').menu({ content: data, FlyOut: true }); }); }); $(function(){ $(' ').appendTo('body').themeswitcher(); }); You chose:

flat menu Google Yahoo MSN Ask AOL 彈出式選單 iPod 風格選單 突發新聞 娛樂 政治 A&E 體育 棒球 籃球 如您所見，非常長的標籤可以很好地包裹 游泳 高中 學院 專業 男子游泳 新聞 活動 獎項 行程 團隊成員 粉絲網站 女子游泳 新聞 活動 獎項 行程 團隊成員 粉絲網站 成人休閒 青少年休閒活動 高級休閒 網球 滑冰 Javascript 程式設計 跑步 散步 本地 健康 娛樂 名人新聞 八卦 電影 音樂 替代方案 國 跳舞 電子 金屬 流行音樂 搖正 樂團 Dokken 歌曲 幻燈片簡報 紅無 財務 個人 貸款 小老 債務 業務 食物和烹飪 早餐 午餐 晚餐 甜點 轉小蛋糕 多力多滋 生活方式 新聞 政明 體育 倉庫 籃球 游泳 高中 學院 專業 男子電影 新聞 活動 獎鋨 團隊成員 粉絲網站 女子游泳 News Events Awards Schedule Team Members Fan Site Adult Recreational Youth Recreational Senior Recreational Tennis Ice Skating Javascript Programming Running Walking ipod-style menu w/ breadcrumb Breaking News Entertainment Politics A&E Sports Baseball Basketball A really long label would wrap nicely as you can see Swimming High School College Professional Mens Swimming News Events Awards Schedule Team Members Fan Site 女子游泳 新聞 活動 獎項 行程 團隊成員 粉絲網站 成人休閒 青少年休閒活動 高級休閒 網球 滑冰 Javascript 程式設計 跑步 散步 本地 健康 娛樂 名人新聞 八卦 電影 音樂 替代方案 國 跳舞 電子 金屬 流行音樂 搖正 樂團 Dokken 歌曲 幻燈片簡報 紅無 財務 個人 貸款 小老 債務 業務 食物和烹飪 早餐 午餐 晚餐 甜點 轉小蛋糕 多力多滋 生活方式 新聞 政明 體育 倉庫 籃球 游泳 高中 學院 專業 男子電影 新聞 活動 獎鋨 團隊成員 粉絲網站 女子游泳 News 作用 獎項 行程 團隊成員 粉絲網站 成人休閒 青少年休閒活動 高級休閒 網球 滑冰 Javascript 程式設計 跑步 散步 身體>

以上就是本文所述的全部內容了，希望對大家學習jQuery能夠有所幫助。

jQuery實現精美的多層下拉式選單特效_jquery

相關文章