Accordion Menu
JavaScriptChange a basic vertical Menu into a expandable accordion menu with the Accordion Menu plugin.
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 videoYou 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>Sass Reference
Variables
The default styles of this component can be customized using these Sass variables in your project's settings file.
JavaScript Reference
Initializing
The following files must be included in your JavaScript to use this plugin:
foundation.core.js-
foundation.accordionMenu.js- With utility library
foundation.util.keyboard.js - With utility library
foundation.util.nest.js
- With utility library
Foundation.AccordionMenu
Creates a new instance of an accordion menu.
var elem = new Foundation.AccordionMenu(element, options);Fires these events: AccordionMenu#event:init
| Name | Type | Description |
|---|---|---|
element |
jQuery | jQuery object to make into an accordion menu. |
options |
Object | Overrides to the default plugin settings. |
Plugin Options
Use these options to customize an instance of Accordion Menu. Plugin options can be set as individual data attributes, one combined data-options attribute, or as an object passed to the plugin's constructor. Learn more about how JavaScript plugins are initialized.
| Name | Type | Default | Description |
|---|---|---|---|
data-parent-link |
boolean |
false |
Adds the parent link to the submenu. |
data-slide-speed |
number |
250 |
Amount of time to animate the opening of a submenu in ms. |
data-submenu-toggle |
|
|
Adds a separate submenu toggle button. This allows the parent item to have a link. |
data-submenu-toggle-text |
|
|
The text used for the submenu toggle if enabled. This is used for screen readers only. |
data-multi-open |
boolean |
true |
Allow the menu to have multiple open panes. |
Events
These events will fire from any element with a Accordion Menu plugin attached.
| Name | Description |
|---|---|
down.zf.accordionMenu |
Fires when the menu is done opening. |
up.zf.accordionMenu |
Fires when the menu is done collapsing up. |
Methods
hideAll
$('#element').foundation('hideAll');Closes all panes of the menu.
showAll
$('#element').foundation('showAll');Opens all panes of the menu.
toggle
$('#element').foundation('toggle', $target);Toggles the open/close state of a submenu.
| Name | Type | Description |
|---|---|---|
$target |
jQuery | the submenu to toggle |
down
$('#element').foundation('down', $target);Opens the sub-menu defined by $target.
Fires these events: AccordionMenu#event:down
| Name | Type | Description |
|---|---|---|
$target |
jQuery | Sub-menu to open. |
up
$('#element').foundation('up', $target);Closes the sub-menu defined by $target. All sub-menus inside the target will be closed as well.
Fires these events: AccordionMenu#event:up
| Name | Type | Description |
|---|---|---|
$target |
jQuery | Sub-menu to close. |
_destroy
$('#element').foundation('_destroy');Destroys an instance of accordion menu.
Fires these events: AccordionMenu#event:destroyed