Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device.
The Dropdown Menu is used for displaying an expandable dropdown menu by using the Foundation CSS plugin. There are various JavaScript Reference facilitated by the Foundation CSS that enhances the user experience along with increasing the interactivity of the site. Below is the list of JavaScript Reference that is utilized by the Dropdown Menu, is described below:
- Initialization: To enable the use of the plugin, there are several files that are provided by the Foundation CSS & those files must be included in the JavaScript code, in order to make the Dropdown Menu functional.
- Foundation.DropdownMenu: In this case, Foundation CSS facilitates the creation of a new instance of DropdownMenu with the help of the following syntax:
var elem = new Foundation.DropdownMenu(element, options);
Where,
- element: This parameter specifies the jQuery object to build the dropdown menu.
- options: This parameter specifies overriding the default plugin settings to the dropdown menu.
The DropdownMenu#event:init fires the events, once the instances for the DropdownMenu get created.
-
Plugin Options: This provides the customization of the instance for the Dropdown Menu. It sets as individual data attributes, where one can be combined with the data-options attribute, or can be combined as an object passed to the plugin’s constructor. The different Plugin Options with their descriptions are described below:
- data-disable-hover: This plugin option does not allow the hover events from opening the submenus. It is of boolean type & its default value is false.
- data-disable-hover-on-touch: If we don’t want to allow hovering on touch devices, then this plugin option can be implemented. It is of boolean type & its default value is true.
- data-autoclose: This plugin option permits a submenu to automatically close on a mouseleave event if it is not clicked open. It is of boolean type & its default value is true.
- data-hover-delay: It is used to set the amount of time for delaying the opening of a submenu on the hover event. It is of number type & its default value is 50.
- data-click-open: It permits the submenu to open or remain open on the parent click event, along with allowing the cursor to move away from the menu. It is of boolean type & its default value is false.
- data-closing-time: This plugin option specifies the amount of time for delaying the closing of a submenu, while a mouseleave event occurs. It is of number type & its default value is 500.
- data-alignment: This plugin option permits us to set the alignment of the dropdown menu. We can choose from a left, auto, or right alignment. It is of string type & its default value is auto.
- data-close-on-click: This option allows us to set whether the dropdown menu should be closed when a menu item is clicked. It is of boolean type & its default value is true.
- data-close-on-click-inside: This plugin option permits to clicks on the leaf anchor links in order to close any open submenus. It is of boolean type & its default value is true.
- data-vertical-class: This option allows us to add a custom CSS class to the dropdown menu for vertical alignment. It is of string type & its default value is vertical.
- data-right-class: This option specifies the class implemented for the right-side oriented menus, & its default value is `align-right` in Foundation CSS, & it can be updated if using we are using our own class. It is of string type & its default value is align-right.
- data-force-follow: This plugin option is forced to override the click of links in order to perform the default action on the second touch event for mobile. It is of boolean type & its default value is true.
We can pass the above-mentioned plugin options as an object to the DropdownMenu constructor in order to customize the behavior of the dropdown menu.
-
Events: The Foundation Dropdown Menu library triggers several events that we can use to customize the behavior of your dropdown menu. Here are some common events:
- show.zf.dropdown: This event is triggered when the dropdown menu is opened.
- hide.zf.dropdown: This event is triggered when the dropdown menu is closed.
To listen for these events, we can use the on() method:
$('.dropdown-parent').on('show.zf.dropdown', function() {
// Do something when dropdown menu is opened
});-
Methods: The Foundation Dropdown Menu library provides several methods that you can use to interact with your dropdown menu. The most commonly used method is described below:
- _destroy: This method is used to destroy the plugin.
To call this method, you can use the foundation() method:
$('#element').foundation('_destroy');Now, we will look at an HTML code implementing the foundation CSS dropdown menu using JavaScript reference as an example.
Example 1: This example describes the Dropdown Menu JavaScript Reference using Foundation CSS.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
Foundation CSS Dropdown Menu JavaScript Reference
</h3>
<ul class="vertical dropdown menu" data-dropdown-menu data-responsive-menu="accordion medium-dropdown"
style="max-width: 250px;">
<li>
<a href="#">Opt 1</a>
<ul class="vertical menu nested">
<li>
<a href="#">Opt 1A</a>
</li>
<li>
<a href="#">Opt 1B</a>
</li>
<li>
<a href="#">Opt 1C</a>
</li>
</ul>
</li>
<li><a href="#">Opt 2</a></li>
<li>
<a href="#">Opt 3</a>
<ul class="vertical menu nested">
<li>
<a href="#">Opt 3A</a>
</li>
<li>
<a href="#">Opt 3B</a>
</li>
<li>
<a href="#">Opt 3C</a>
</li>
</ul>
</li>
<li><a href="#">Opt 4</a></li>
</ul>
<script>
var dropdownMenu =
new Foundation.DropdownMenu($('.dropdown.menu'), {
alignment: 'auto',
closeOnClick: true,
disableHover: false,
clickOpen: true,
});
</script>
</body>
</html>
|
Output:
Here, note that we have created a dropdownMenu variable to hold the instance of the dropdown menu plugin, and passed in the plugin options when creating the instance. Inside the ul element, we create 4 <li> elements. The first and third <li> elements have nested submenus, which are created by adding an additional <ul> element with the classes vertical, menu, and nested inside the corresponding li elements. Each submenu contains three nested li elements with links labeled “Opt 1A”, “Opt 1B”, and “Opt 1C”, or “Opt 3A”, “Opt 3B”, and “Opt 3C”, respectively. Finally, we load jQuery and the Foundation JavaScript files and initialize the Foundation framework using the foundation() method on the document object.
Reference: https://get.foundation/sites/docs/dropdown-menu.html#javascript-reference