Simple multi-level vertical accordion drop-down list menu and accordion drop-down menu

Simple multi-level vertical accordion drop-down list menu and accordion drop-down menu

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 used on the checkbox element.:checkedPseudo elements. 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 Online Preview source code

Method of 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 sub-menu, addinput[type=checkbox]And onelabelLabel to add.has-childrenClass. All other standard list items are included in oneaLabel.

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

The multilevel accordion menu only uses CSS to detect click and expand sub-menus. It usescheckboxElement, and then:checkedPseudo class and adjacent sibling selector to change<ul>The display mode of the element, from "none" to "block ".

First, make sure that all list items with sub-menus containcheckboxElement. When you clicklabelWhen the element is on, the correspondingcheckboxElement: This is setlabelElementforAttribute. Then you can simply hidecheckboxElement, throughlabelElement to replace it.

.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 timeul.cd-accordion-menuAdd on Element.animateClass, which will make the animation effect when opening or closing the sub-menu in the direction of the Small arrow.