Foundation - Dropdown JavaScript reference

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

Initializing

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

  • foundation.util.keyboard.js

  • foundation.util.box.js

  • foundation.util.nest.js

Foundation.DropdownMenu

It specifies instance of a dropdown menu as defined below −

var elem = new Foundation.DropdownMenu(element);

Sr.No. Name & Description Type
1

Element

It creates a jQuery object into a dropdown menu.

 jQuery
2

Options

Default plugin setting is override.

 Object

Plugin Options

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

Sr.No. Name & Description Example
1

disableHover

Hover event is disabled from opening submenus.false

 false
2

autoclose

Automatically, the sub menus are closed when the mouse leaves the event.

 true
3

hoverDelay

It delays the time while opening the submenus on hover event.

 50
4

clickOpen

The submenus are allowed to remain open on parent click event.

 true
5

closingTime

It delays the time while closing the submenus on mouseleave event.

 500
6

alignment

Depending upon the menu, the direction is set to open the submenus.

 'left'
7

closeOnClick

The open submenus are closed by a click on the body.

 true
8

verticalClass

To set the menu vertical, the class vertical is used.

 'vertical'
9

rightClass

Set the menu at the right side.

 'align-right'
10

forceFollow

To perform default action, the Boolean is force to override links of clicking on second touch event for mobile.

 false

Events

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

Sr.No. Name & Description
1

show.zf.dropdown menus

It triggers an event when new dropdown pane is visible.
2

hide.zf.dropdown menus

It triggers an event when the open menus are closed.

Functions

.destroy

The plugin is destroyed.

foundation_navigation.htm
Advertisements