Jquery vertical multilevel accordion menu with source code download _ jquery

This article will share with you a simple but practical multi-level vertical accordion drop-down menu list that uses css to create a multi-level accordion menu, this code is used to group different sub-menus to produce multi-level menu effects. This article is accompanied by a result demonstration and a friend interested in source code download to learn it first, continue to look at your favorite friends.

This is a simple but practical multi-level vertical accordion drop-down list menu. The multi-level accordion menu is completely made using CSS. It groups different sub-menus to produce the multi-level menu effect.

The multilevel accordion menu is created by using the checked pseudo element on the checkbox element. If you need some nice animation effects, you can use the main. js file provided by the plug-in. It can provide the animation effects of the Small arrow on the left when the menu is opened or shrunk.

Download demo source code

Usage

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 sub-menu, add an input [type = checkbox] and a label, and add a. has-children class for this list item. All other standard list items are included in a tag.

 
 
 
  
  
  Group 1 
   
 
    
  Sub Group 1 
     
 
      
Image
 
      
Image
 
      
Image
 
     
 
 
    
Image
 
    
Image
 
   
 
 
  
  
Image
 
  
  
Image
 
 
 
  

CSS style

The multilevel accordion menu only uses CSS to detect click and expand sub-menus. It uses the checkbox element and then the checked pseudo class and the adjacent sibling selector to change

The display mode of the element, from "none" to "block ".

First, make sure that all list items with sub-menus contain the checkbox element. When you click a label element, you actually click the corresponding checkbox element, which is implemented by setting the for Attribute of the label element. Then we can simply hide the checkbox element and replace it with the 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 the main. js file provided in jQuery and the plug-in. At the same time, you need to add the. animate class to the ul. cd-accordion-menu element, which will make the direction of the Small Arrow animated when opening and closing the sub-menu.

The above content is the full description of Jquery vertical multi-level accordion menu with source code download introduced in this article. I hope you will like it. You can click to download the source code.