Jquery 垂直多級手風(fēng)琴菜單附源碼下載
首先給大家展示下效果圖,喜歡的朋友繼續(xù)往下看哦。
這是一款簡單但實(shí)用的多級垂直手風(fēng)琴下拉列表菜單。該多級手風(fēng)琴菜單完全使用CSS來制作,它通過將不同的子菜單進(jìn)行分組,制作出多級菜單的效果。
該多級手風(fēng)琴菜單通過在checkbox元素上使用:checked偽元素來制作。如果需要一些好看的動畫效果,可以實(shí)用插件中提供的main.js文件,它可以提供菜單打開和收縮時左側(cè)小箭頭的動畫效果。
使用方法
HTML結(jié)構(gòu)
該多級手風(fēng)琴菜單的HTML結(jié)構(gòu)非常簡單:整個手風(fēng)琴是一個無序列表。如果某個列表項(xiàng)中包含有子菜單,則添加一個input[type=checkbox]和一個label標(biāo)簽,同時為該列表項(xiàng)添加一個.has-children的class類。所有其它標(biāo)準(zhǔn)的列表項(xiàng)都包含在一個a標(biāo)簽中。
<ul class="cd-accordion-menu"> <li class="has-children"> <input type="checkbox" name ="group-1" id="group-1" checked> <label for="group-1">Group 1</label> <ul> <li class="has-children"> <input type="checkbox" name ="sub-group-1" id="sub-group-1"> <label for="sub-group-1">Sub Group 1</label> <ul> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> </li> <li><a href="#0">Image</a></li> <li><a href="#0">Image</a></li> </ul> <!-- cd-accordion-menu -->
CSS樣式
該多級手風(fēng)琴菜單僅使用CSS來檢測點(diǎn)擊和展開子菜單。它使用的方法是通過checkbox元素,然后通過:checked偽類和相鄰的兄弟選擇器來改變<ul>元素的顯示模式,從“none”改變?yōu)椤癰lock”。
首先需要確保所有有子菜單的列表項(xiàng)都帶有checkbox元素。當(dāng)你點(diǎn)擊在一個label元素上的時候,實(shí)際是點(diǎn)擊了相應(yīng)的checkbox元素:這通過設(shè)置label元素的for屬性來實(shí)現(xiàn)。接著就可以簡單的隱藏checkbox元素,通過label元素來取代它。
.cd-accordion-menu input[type=checkbox] { /* hide native checkbox */ position: absolute; opacity: 0; } .cd-accordion-menu label, .cd-accordion-menu a { position: relative; display: block; padding: 18px 18px 18px 64px; background: #4d5158; box-shadow: inset 0 -1px #555960; color: #ffffff; font-size: 1.6rem; }
JavaScript
如果你需要為這個手風(fēng)琴菜單添加一些好看的動畫效果,可以使用jQuery和插件中提供的main.js文件。同時需要在ul.cd-accordion-menu元素上添加.animate class類,它會使小箭頭的方向在打開和關(guān)閉子菜單時產(chǎn)生動畫效果。
以上內(nèi)容就是本文給大家介紹的Jquery 垂直多級手風(fēng)琴菜單附源碼下載的全部敘述,希望大家喜歡。喜歡的朋友可以直接點(diǎn)擊下載源碼哦。
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- jQuery制作效果超棒的手風(fēng)琴折疊菜單
- 基于Jquery代碼實(shí)現(xiàn)手風(fēng)琴菜單
- jQuery多級手風(fēng)琴菜單實(shí)例講解
- 基于jQuery實(shí)現(xiàn)以手風(fēng)琴方式展開和折疊導(dǎo)航菜單
- 基于JQuery的一句話搞定手風(fēng)琴菜單
- jquery實(shí)現(xiàn)簡單手風(fēng)琴菜單效果實(shí)例
- jquery實(shí)現(xiàn)下拉菜單的手風(fēng)琴效果
- 基于jQuery實(shí)現(xiàn)手風(fēng)琴菜單、層級菜單、置頂菜單、無縫滾動效果
- jQuery插件實(shí)現(xiàn)手風(fēng)琴二級菜單
相關(guān)文章
jQuery Form 表單提交插件之formSerialize,fieldSerialize,fieldValue,r
這篇文章主要介紹了jQuery Form 表單提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的應(yīng)用的相關(guān)資料,需要的朋友可以參考下2016-01-01jQuery插件zTree實(shí)現(xiàn)的多選樹效果示例
這篇文章主要介紹了jQuery插件zTree實(shí)現(xiàn)的多選樹效果,結(jié)合實(shí)例形式分析了jQuery樹形插件zTree實(shí)現(xiàn)多選樹效果的具體操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03jquery動態(tài)加載js/css文件方法(自寫小函數(shù))
jquery自帶的getSrcript文件只能動態(tài)加載js代碼,但不能加載css,后來自己寫了一個可加載js與css的程序2014-10-10jquery 學(xué)習(xí)筆記 傳智博客佟老師附詳細(xì)注釋
本人水平有限,在學(xué)習(xí)時請用批判的態(tài)度學(xué)習(xí),有問題給我留言 傳智博客佟老師 jqurey 學(xué)習(xí)筆記,以及例子代碼詳細(xì)注釋。2009-07-07