Foundation CSS is an open-source & responsive front-end framework built by the ZURB foundation in September 2011, which makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on SaaS-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
The Kitchen Sink has the Foundation elements to work well in our websites and applications. The Dropdown Menu component is a way to create a dropdown in the navigation where one can have a multi-level dropdown and can display data in a list format. Being specific for navigation, it is therefore called the dropdown menu.
Foundation CSS Kitchen Sink Dropdown Menu Classes:
- horizontal: Dropdown Menu is built on the Menu component’s syntax. Adding class .dropdown and the attribute data-dropdown-menu to the menu container set up the dropdown.
- vertical: To add a Vertical Dropdown Menu, add the .vertical class to the topmost menu. Sub-menus are automatically vertical, regardless of the orientation of the top-level menu.
Syntax:
<ul class="dropdown menu" data-dropdown-menu>
<a href="#">Tab 1</a>
<a href="#">Tab 2</a>
<uil>
Example 1: The following code shows a Horizontal Dropdown Menu
<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr">
<head>
<title>Foundation CSS Kitchen Sink Dropdown Menu</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Dropdown Menu</h3>
<br />
<ul class="dropdown menu" data-dropdown-menu>
<li>
<a>Tab 1</a>
<ul class="menu">
<li><a href="#">Subtab 1</a></li>
<li>
<a href='#'>Subtab 2</a>
<ul class='menu'>
<li><a href='#'>Subtab 2(1)</a></li>
<li><a href='#'>Subtab 2(2)</a></li>
<li>
<a href='#'>Subtab 2(3)</a>
<ul class='menu'>
<li><a href='#'>
Subtab 2(3[1])
</a></li>
<li><a href='#'>
Subtab 2(3[2])
</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Subtab 3</a></li>
</ul>
</li>
<li>
<a href="#">Tab 2</a>
<ul class="menu">
<li><a href="#">Subtab 1</a></li>
<li><a href="#">Subtab 2</a></li>
</ul>
</li>
<li><a href="#">Tab 3</a></li>
</ul>
</ul>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Kitchen Sink Horizontal Dropdown Menu
Example 2: The following code shows a Vertical Dropdown Menu
<!DOCTYPE html> <html class="no-js" lang="en" dir="ltr">
<head>
<title>Foundation CSS Kitchen Sink Dropdown Menu</title>
<!-- Compressed CSS -->
<link rel="stylesheet"
href=
<!-- Compressed JavaScript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">GeeksforGeeks</h1>
<h3>Foundation CSS Kitchen Sink Dropdown Menu</h3>
<br />
</center>
<ul class="vertical dropdown menu" data-dropdown-menu style="max-width: 250px;">
<li>
<a>Tab 1</a>
<ul class="menu">
<li><a href="#">Subtab 1</a></li>
<li>
<a href='#'>Subtab 2</a>
<ul class='menu'>
<li><a href='#'>Subtab 2(1)</a></li>
<li><a href='#'>Subtab 2(2)</a></li>
<li>
<a href='#'>Subtab 2(3)</a>
<ul class='menu'>
<li><a href='#'>
Subtab 2(3[1])
</a></li>
<li><a href='#'>
Subtab 2(3[2])
</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Subtab 3</a></li>
</ul>
</li>
<li>
<a href="#">Tab 2</a>
<ul class="menu">
<li><a href="#">Subtab 1</a></li>
<li><a href="#">Subtab 2</a></li>
</ul>
</li>
<li><a href="#">Tab 3</a></li>
</ul>
</ul>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Kitchen Sink Vertical Dropdown Menu
Reference: https://get.foundation/sites/docs/kitchen-sink.html#dropdown-menu