Author: | woody180 |
---|---|
Views Total: | 2,282 views |
Official Page: | Go to website |
Last Update: | April 15, 2019 |
License: | MIT |
Preview:

Description:
A small pure JavaScript library that transforms nested HTML unordered lists into a smooth multi-level accordion menu.
How to use it:
Create the HTML for the accordion menu.
<div class="accordion-menu example"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Menu 3.1</a></li> <li><a href="#">Menu 3.2</a></li> <li><a href="#">Menu 3.3</a> <ul> <li><a href="#">Menu 3.3.1</a></li> <li><a href="#">Menu 3.3.2</a></li> <li><a href="#">Menu 3.3.3</a></li> </ul> </li> <li><a href="#">Menu 3.4</a> <ul> <li><a href="#">Menu 3.4.1</a></li> <li><a href="#">Menu 3.4.2</a> <ul> <li><a href="#">Menu 3.4.2.1</a></li> <li><a href="#">Menu 3.4.2.2</a></li> <li><a href="#">Menu 3.4.2.3</a></li> </ul> </li> <li><a href="#">Menu 3.4.3</a></li> </ul> </li> <li><a href="#">Menu 3.5</a></li> </ul> </li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a> <ul> <li><a href="#">Menu 5.1</a></li> <li><a href="#">Menu 5.2</a></li> <li><a href="#">Menu 5.3</a></li> </ul> </li> </ul> </div>
Import the main JavaScript file accordion-menu.js
into the document.
<script src="js/accordion-menu.js"></script>
Initialize the accordion menu.
new AccordionMenu('.example');
The example CSS for the accordion menu.
.accordion-menu ul { list-style: none; margin: 0; padding: 0; } .accordion-menu li.open > ul { display: block; } .accordion-menu li > ul { /* position: absolute; */ display: none; height: 0; overflow: hidden; transition: height 350ms ease-in-out; margin-left: 25px; } .accordion-menu ul.is-visible { display: block; /* height: auto; */ } .accordion-menu li { border-bottom: 1px solid rgba(194, 194, 194, 0.333); position: relative; overflow: hidden; transition: all .4s ease; } .accordion-menu li:last-child { border: none; } .accordion-menu li::after { content: ""; display: block; clear: both; } .accordion-menu li > a > svg { display: block; position: relative; fill: rgb(48, 48, 48); width: 10px; float: right; transition: all .3s ease; } .accordion-menu li.open > a > svg { transform: rotate(90deg); } .accordion-menu a { background-color: aliceblue; padding: 7px 20px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; text-decoration: none; } .accordion-menu * { box-sizing: border-box; }