Author: | rodrigo-rpds95 |
---|---|
Views Total: | 1,855 views |
Official Page: | Go to website |
Last Update: | June 28, 2019 |
License: | MIT |
Preview:

Description:
A smooth, semantic, SEO-friendly accordion menu (dropdown menu) built with HTML unordered list and CSS/CSS3.
How to use it:
Create the accordion menu from a nested HTML unordered list.
<ul> <li> <p><a href="#t1">GROUP 1</a></p> <ul id="t1"> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> </ul> <a href="#foo"></a> </li> <li> <p><a href="#t2">GROUP 2</a></p> <ul id="t2"> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> </ul> <a href="#foo"></a> </li> <li> <p><a href="#t4">GROUP 3</a></p> <ul id="t4"> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> </ul> <a href="#foo"></a> </li> <li> <p><a href="#t5">GROUP 4</a></p> <ul id="t5"> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> </ul> <a href="#foo"></a> </li> <li> <p><a href="#t6">GROUP 5</a></p> <ul id="t6"> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> <li><a href="#">Category</a></li> </ul> <a href="#foo"></a> </li> </ul>
The basic CSS styles for the accordion menu.
ul { list-style: none; margin: 0; max-width: 300px; padding: 0; width: 100%; } ul > li { position: relative; } ul > li p { margin: 0; } ul > li p a { background: #0ABAB5; color: #fff; display: block; padding: 15px; text-decoration: none; } ul > li a[href="#foo"] { height: 0; position: absolute; top: 0; width: 100%; } ul > li a[href="#foo"]::before { border: solid #98e9e7; border-width: 0 2px 2px 0; content: ""; display: inline-block; padding: 4px; position: absolute; right: 10px; top: 12px; transition: transform 0.2s ease; transform: rotate(-45deg); z-index: 1; } ul > li ul { max-height: 0; overflow: hidden; transition: max-height 0.6s ease-out; } ul > li ul li a { background: #efefef; border-bottom: 1px solid #e1e1e1; display: block; text-decoration: none; padding: 10px; } ul > li ul li a:hover { background: #e1e1e1; }
Toggle the sub-menu by clicking the header.
ul:target { max-height: 800px; transition: max-height 2s ease-out; } :target + a[href="#foo"] { height: 45px; } :target + a[href="#foo"]::before { transform: rotate(45deg); }