Jquery Vertical Multilevel Accordion menu with source download _jquery

First to show you the effect of the picture, like friends continue to look down oh.

This is a simple but practical multi-level vertical accordion drop-down list menu. The multi-level accordion menu is made entirely of CSS, and it makes a multilevel menu by grouping different submenus.

The multilevel accordion menu is made by using the checked pseudo element on the checkbox element. If you need some nice animated effects, you can use the Main.js file provided in the plugin, which provides animation of the left small arrow when the menu opens and shrinks.

Effect Demo Source Download

How to use

HTML structure

The HTML structure of the multilevel accordion menu is very simple: the entire accordion is an unordered list. If a list item contains a submenu, add a Input[type=checkbox] and a label label, and add a. Has-children class for the list item. All other standard list items are included in a label of a.

<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>

CSS Styles

This multilevel accordion menu only uses CSS to detect clicking and expanding submenus. The method used is to change the display mode of the <ul> element from "none" to "block" by using the checkbox element and then by: the checked pseudo class and the neighboring sibling selector.

First you need to make sure that all list items with submenus have a checkbox element. When you click on a LABEL element, you actually click on the corresponding checkbox element: This is done by setting the for property of the label element. You can then simply hide the checkbox element and replace it with a LABEL element.

. 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

If you need to add some nice animated effects to this accordion menu, you can use jquery and the Main.js file provided in the plugin. You also need to add the. Animate class class on the Ul.cd-accordion-menu element, which causes the direction of the small arrows to animate when you open and close the submenu.

The above content is this article gives everybody to introduce the jquery vertical multi-level accordion menu to download the entire narration, hoped everybody likes. Like friends can directly click on download source Oh.