Foundation CSS Horizontal Dropdown Menu
Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.
Dropdown menu is used to display the menu as an expanded menu with some items. We can create a horizontal and vertical dropdown menu to arrange our items. Horizontal Dropdown Menu is used to create the menu in the horizontal direction and sub-menus are automatically vertically aligned. In this article, we will learn the Horizontal dropdown Menu in Foundation CSS.
Foundation CSS Horizontal Dropdown Menu Class:
- menu: This class is used to create the menu with list of items. The menu is of the horizontal type by default.
Syntax:
<ul class="dropdown menu" data-dropdown-menu>
.....
</ul>Example 1: The following code demonstrates the Horizontal Dropdown Menu with some items.
HTML
<!DOCTYPE html><html> <head> <!-- 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 Horizontal Dropdown Menu</h3> <ul class="dropdown menu" data-dropdown-menu> <li><a href="">GFG 1</a></li> <li><a href="">GFG 2</a></li> <li><a href="">GFG 3</a></li> <li><a href="">GFG 4</a></li> <li><a href="">GFG 5</a></li> <li><a href="">GFG 6</a></li> </ul> </center> <script> $(document).ready(function () { $(document).foundation(); }); </script></body> </html> |
Output:
Example 2: The following code demonstrates the Horizontal Dropdown Menu with menus and sub-menus.
HTML
<!DOCTYPE html><html> <head> <!-- 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 Horizontal Dropdown Menu</h3> <ul class="dropdown menu" data-dropdown-menu> <li> <a href="#">GFG 1</a> <ul class="menu"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li><a href="#">Item 4</a></li> </ul> </li> <li><a href="#">GFG 2</a> <ul class="menu"> <li><a href="#">item a</a> <ul class="menu"> <li><a href="#">item a1</a></li> <li><a href="#">item a2</a></li> </ul> </li> <li><a href="#">item b</a></li> </ul> </li> <li><a href="#">GFG 3</a></li> </ul> </center> <script> $(document).ready(function () { $(document).foundation(); }); </script></body> </html> |
Output:
Reference: https://get.foundation/sites/docs/dropdown-menu.html#horizontal
Please Login to comment...