首先給大家展示下效果圖，喜歡的朋友繼續(xù)往下看哦。

這是一款簡(jiǎn)單但實(shí)用的多級(jí)垂直手風(fēng)琴下拉列表菜單。該多級(jí)手風(fēng)琴菜單完全使用CSS來(lái)制作，它通過(guò)將不同的子菜單進(jìn)行分組，制作出多級(jí)菜單的效果。

該多級(jí)手風(fēng)琴菜單通過(guò)在checkbox元素上使用:checked偽元素來(lái)制作。如果需要一些好看的動(dòng)畫(huà)效果，可以實(shí)用插件中提供的main.js文件，它可以提供菜單打開(kāi)和收縮時(shí)左側(cè)小箭頭的動(dòng)畫(huà)效果。

 效果演示       源碼下載

使用方法

HTML結(jié)構(gòu)

該多級(jí)手風(fēng)琴菜單的HTML結(jié)構(gòu)非常簡(jiǎn)單：整個(gè)手風(fēng)琴是一個(gè)無(wú)序列表。如果某個(gè)列表項(xiàng)中包含有子菜單，則添加一個(gè)input[type=checkbox]和一個(gè)label標(biāo)簽，同時(shí)為該列表項(xiàng)添加一個(gè).has-children的class類。所有其它標(biāo)準(zhǔn)的列表項(xiàng)都包含在一個(gè)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樣式

該多級(jí)手風(fēng)琴菜單僅使用CSS來(lái)檢測(cè)點(diǎn)擊和展開(kāi)子菜單。它使用的方法是通過(guò)checkbox元素，然后通過(guò):checked偽類和相鄰的兄弟選擇器來(lái)改變<ul>元素的顯示模式，從“none”改變?yōu)椤癰lock”。

首先需要確保所有有子菜單的列表項(xiàng)都帶有checkbox元素。當(dāng)你點(diǎn)擊在一個(gè)label元素上的時(shí)候，實(shí)際是點(diǎn)擊了相應(yīng)的checkbox元素：這通過(guò)設(shè)置label元素的for屬性來(lái)實(shí)現(xiàn)。接著就可以簡(jiǎn)單的隱藏checkbox元素，通過(guò)label元素來(lái)取代它。

.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

如果你需要為這個(gè)手風(fēng)琴菜單添加一些好看的動(dòng)畫(huà)效果，可以使用jQuery和插件中提供的main.js文件。同時(shí)需要在ul.cd-accordion-menu元素上添加.animate class類，它會(huì)使小箭頭的方向在打開(kāi)和關(guān)閉子菜單時(shí)產(chǎn)生動(dòng)畫(huà)效果。

以上內(nèi)容就是本文給大家介紹的Jquery 垂直多級(jí)手風(fēng)琴菜單附源碼下載的全部敘述，希望大家喜歡。喜歡的朋友可以直接點(diǎn)擊下載源碼哦。

最新評(píng)論