4.1 KiB
| title | sass | js | description | video |
|---|---|---|---|---|
| Accordion Menu | scss/components/_accordion-menu.scss | js/foundation.accordionMenu.js | Change a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin. | FXZIZ9N4aeI |
Basics
Accordion menus follow the basic Menu syntax of <ul>, <li>, and <a>. To convert a basic menu into an accordion, add the attribute data-accordion-menu. You probably also want it to be vertical, so add the class .vertical as well.
Any <a> will behave like a standard link. However, any <a> paired with a nested <ul> menu will then slide that sub-menu up and down when clicked on.
Watch this part in video
You can use the built-in .nested class to add an indent to a nested menu.
To have a sub-menu already open when the page loads, add the class .is-active to that sub-menu.
<ul class="vertical menu accordion-menu" data-accordion-menu>
<li>
<a href="#">Item 1</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1A</a></li>
<li><a href="#">Item 1B</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
Submenu Toggle
Accordion menus can have a separate submenu toggle. This allows the parent item to have its own link, but still allows the submenu to be opened/closed.
You need to add the class accordion-menu as well as the data attribute data-submenu-toggle="true" for this to work correctly.
<ul class="vertical menu accordion-menu" data-accordion-menu data-submenu-toggle="true">
<li>
<a href="http://foundation.zurb.com/">Zurb Foundation</a>
<ul class="menu vertical nested">
<li>
<a href="#">Item 1A</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1Ai</a></li>
<li><a href="#">Item 1Aii</a></li>
<li><a href="#">Item 1Aiii</a></li>
</ul>
</li>
<li><a href="#">Item 1B</a></li>
<li><a href="#">Item 1C</a></li>
</ul>
</li>
<li>
<a href="#">Item 2</a>
<ul class="menu vertical nested">
<li><a href="#">Item 2A</a></li>
<li><a href="#">Item 2B</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>