Drilldown Menu
JavaScriptDrilldown is one of Foundation's three menu patterns, which converts a series of nested lists into a vertical drilldown menu.
Basics
Drilldowns use the standard Menu syntax, using <ul>, <li>, and <a>. Add data-drilldown to the root menu to set up the drilldown.
To create sub-menus, place a <ul> next to an <a>. Clicking that <a> will then open the <ul> that it's next to.
Any <a> without a submenu will function like a normal link.
<ul class="vertical menu" data-drilldown>
<li>
<a href="#Item-1">Item 1</a>
<ul class="vertical menu">
<li><a href="#Item-1A">Item 1A</a></li>
<!-- ... -->
</ul>
</li>
<li><a href="#Item-2">Item 2</a></li>
</ul>
The drilldown menu takes on the height of the tallest menu in the hierarchy, so the menu doesn't change height as the user navigates it.
Custom Styling
The drilldown plugin automatically adds a back button to the top of each nested menu. To style this control, target the .js-drilldown-back class:
.js-drilldown-back {
// ...
}
JavaScript Reference
Initializing
The following files must be included in your JavaScript to use this plugin:
foundation.core.js-
foundation.drilldown.js- With utility library
foundation.util.keyboard.js - With utility library
foundation.util.motion.js - With utility library
foundation.util.nest.js
- With utility library
Foundation.Drilldown
Creates a new instance of a drilldown menu.
var elem = new Foundation.Drilldown(element, options);| 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 Drilldown 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-back-button |
|
|
Markup used for JS generated back button. Prepended to submenu lists and deleted on `destroy` method, 'js-drilldown-back' class required. Remove the backslash (`\`) if copy and pasting. |
data-wrapper |
|
|
Markup used to wrap drilldown menu. Use a class name for independent styling; the JS applied class: `is-drilldown` is required. Remove the backslash (`\`) if copy and pasting. |
data-parent-link |
|
|
Adds the parent link to the submenu. |
data-close-on-click |
|
|
Allow the menu to return to root list on body click. |
Events
These events will fire from any element with a Drilldown Menu plugin attached.
| Name | Description |
|---|---|
closed.zf.drilldown |
Fires when the menu is fully closed. |
open.zf.drilldown |
Fires when the submenu has opened. |
hide.zf.drilldown |
Fires when the submenu has closed. |
Methods
_hideAll
$('#element').foundation('_hideAll');Closes all open elements, and returns to root menu.
Fires these events: Drilldown#event:closed
_back
$('#element').foundation('_back', $elem);Adds event listener for each back button, and closes open menus.
Fires these events: Drilldown#event:back
| Name | Type | Description |
|---|---|---|
$elem |
jQuery | the current sub-menu to add `back` event. |
_show
$('#element').foundation('_show', $elem);Opens a submenu.
Fires these events: Drilldown#event:open
| Name | Type | Description |
|---|---|---|
$elem |
jQuery | the current element with a submenu to open, i.e. the `li` tag. |
_hide
$('#element').foundation('_hide', $elem);Hides a submenu
Fires these events: Drilldown#event:hide
| Name | Type | Description |
|---|---|---|
$elem |
jQuery | the current sub-menu to hide, i.e. the `ul` tag. |
destroy
$('#element').foundation('destroy');Destroys the Drilldown Menu
