Foundation - Drilldown JavaScript Reference

Foundation provides JavaScript components for a drilldown menu as listed below.

Initializing

You can initialize the drilldown menu in JavaScript by using the foundation.drilldown.js and foundation.core.js plugins. The plugin requires the following libraries −

  • foundation.util.keyboard.js

  • foundation.util.motion.js

  • foundation.util.nest.js

Foundation.Drilldown

It specifies instance of a drilldown menu as defined below −

var elem = new Foundation.Drilldown(element);

Sr.No. Name & Description Type
1

element

It creates a jQuery object into a drilldown menu.

 jQuery
2

options

Default plugin setting is override.

 Object

Plugin Options

You can use following plugin to customize the drilldown menu instance. You can set the plugin option as individual data attributes.

Sr.No. Name & Description Example
1

backButton

js-drilldown-back class is required. For JS generated back button, markup is used.

 
<\li><\a>Back<\/a><\/li>
2

wrapper

is-drilldown class is required for independent styling.

 
<\div class = "is-drilldown"><\/div>
3

closeOnClick

Clicking on the body it helps the menu to return to root list.

 false

Events

The drilldown menus plugin attached to any element can trigger the following event.

Sr.No. Name & Description
1

closed.zf.drilldown menu

It triggers an event when the menu is completely closed.
2

hide.zf.drilldown menus

It triggers an event when the open submenus are closed.

Functions

The following are the functions used in drilldown menu.

._hideAll

It closes all elements that are opened, and returns back to root menu.

._back

In each back button the event listener is included.

Sr.No. Name & Description Type
1

$elem

back event is included in the current sub-menu.

 jQuery

._show

Submenus are opened.

Sr.No. Name & Description Type
1

$elem

Open the current submenus.

 jQuery

._hide

Submenu is hided.

Sr.No. Name & Description Type
1

$elem

Hides the current submenu

 jQuery

.destroy

The drilldown menu is destroyed.

foundation_navigation.htm
Advertisements