菜單工具插件

菜單工具插件可以通過(guò)<ul>創(chuàng)建多級(jí)內(nèi)聯(lián)或彈出式菜單,支持通過(guò)鍵盤(pán)方向鍵控制菜單滑動(dòng),允許為菜單的各個(gè)選項(xiàng)添加圖標(biāo),調(diào)用格式如下:

$(selector).menu({options});

selector參數(shù)為菜單列表中最外層<ul>元素,options為menu()方法的配置對(duì)象。

在頁(yè)面中,通過(guò)<ul>元素內(nèi)聯(lián)的方式構(gòu)建一個(gè)三層結(jié)構(gòu)的導(dǎo)航菜單,并將最外層<ul>元素通過(guò)menu()方法綁定插件,實(shí)現(xiàn)導(dǎo)航菜單的功能

<body>

<ul id=:menu">

<li><a href="#">我最喜歡的食物</a>

<ul>

<li><a href="#">蔬菜</a>

<ul>

<li><a href="#">芹菜</a></li>

<li><a href="#">胡蘿卜</a></li>

<li><a href="#>茄子</a></li>

</ul>

</li>

<li><a href="#">水果</a>

<ul>

<li><a href="#">香蕉</a></li>

<li><a href="#">葡萄</a></li>

</ul>

</li>

<li<a href="#">飲料</a></li>

</ul>

</li>

<li class="ui-state-disabled"><a href="#">我最喜歡的運(yùn)動(dòng)</a></li>

</ul>

<script type="javascript">

$(fuction(){

$("#menu:").menu();

});

</script>

</body>


通過(guò)<ul>內(nèi)嵌的方式,構(gòu)建一個(gè)三層結(jié)構(gòu)的導(dǎo)航菜單,將<li>元素的class屬性值設(shè)為ui-state-disabled”,可將菜單選項(xiàng)置為不可用狀態(tài)。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第1章 jQuery實(shí)現(xiàn)Ajax應(yīng)用 1-1 使用load()方法異步請(qǐng)求數(shù)據(jù) 使用load()方法通過(guò)Ajax請(qǐng)...
    mo默22閱讀 1,896評(píng)論 1 9
  • 拖曳插件—— draggable 拖曳插件 draggable 的功能是拖動(dòng)被綁定的元素,當(dāng)這個(gè) jQuery U...
    孤傭閱讀 625評(píng)論 0 1
  • 《能量祈禱誓言》 “門(mén)兒哥、博杰,數(shù)據(jù)還是有點(diǎn)低,你們還是先出去下,這個(gè)你們也不用聽(tīng)”啾啾好似調(diào)取了數(shù)據(jù)后,對(duì)我們...
    天空之城正陽(yáng)門(mén)閱讀 378評(píng)論 0 2
  • 下午兩點(diǎn)左右旅行團(tuán)的客人都走了,餐廳眾人也到了午飯時(shí)間。 大廚簡(jiǎn)單地炒兩個(gè)青菜,再準(zhǔn)備一盆饅頭。在后廚放上張桌子,...
    黃陳閱讀 104評(píng)論 0 0
  • 我 渾渾噩噩的我,忙忙碌碌。 我,不知為何,心中所想。 總是想改變,卻跳不自己的圈子。 我,滿(mǎn)是熱度,剩的只是悔恨...
    孤獨(dú)終老一舍閱讀 297評(píng)論 0 0

友情鏈接更多精彩內(nèi)容