Open In App

Foundation CSS Vertical Dropdown Menu

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

Dropdown Menu is used to display the menu items as expandable menu. We can create the dropdown menu to arrange the items systematically with the help of classes. We can create a horizontal and vertical dropdown menu. Vertical Dropdown Menu is used to create the menu in the vertical direction and sub-menus are automatically vertical. In this article, we will discuss how to create the Vertical Dropdown Menu in Foundation CSS.

Foundation CSS Vertical Dropdown Menu class:

  • vertical: It is used to create the vertical dropdown menu.

Syntax:

<ul class="vertical dropdown menu" data-dropdown-menu>
   ...
</ul>

Example 1: The following code demonstrates the Vertical Dropdown Menu with some menu items.

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- Compressed CSS -->
    <link
      rel="stylesheet"
      crossorigin="anonymous"
    />
  
    <!-- Compressed JavaScript -->
    <script 
    </script>
    <script
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <center>
      <h2 style="color: green">GeeksforGeeks</h2>
      <h3>Foundation CSS Vertical Dropdown Menu</h3>
    </center>
  
    <ul class="vertical dropdown menu" data-dropdown-menu>
      <li><a href="#">Home</a></li>
      <li><a href="#">Search</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">About</a></li>
    </ul>
  
    <script>
      $(document).ready(function () {
        $(document).foundation();
      });
    </script>
  </body>
</html>


Output:

Example 2: The following code demonstrates the Vertical Dropdown Menu with menu and sub-menus.

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- Compressed CSS -->
    <link
      rel="stylesheet"
      crossorigin="anonymous"
    />
  
    <!-- Compressed JavaScript -->
    <script 
    </script>
    <script
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <center>
      <h2 style="color: green">GeeksforGeeks</h2>
      <h3>Foundation CSS Vertical Dropdown Menu</h3>
    </center>
  
    <ul
      class="vertical dropdown menu"
      data-dropdown-menu
      style="max-width: 250px"
    >
      <li>
        <a href="#">Home</a>
        <ul class="vertical menu nested">
          <li>
            <a href="#">Item A</a>
            <ul class="vertical menu nested">
              <li><a href="#">Item A1</a></li>
              <li><a href="#">Item A2</a></li>
            </ul>
          </li>
          <li>
            <a href="#">Item B</a>
            <ul class="vertical menu nested">
              <li><a href="#">Item B1</a></li>
              <li><a href="#">Item B2</a></li>
            </ul>
          </li>
          <li><a href="#">Item C</a></li>
        </ul>
      </li>
      <li><a href="#">Search</a></li>
      <li>
        <a href="#">Contact</a>
        <ul class="vertical menu nested">
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
    </ul>
  
    <script>
      $(document).ready(function () {
        $(document).foundation();
      });
    </script>
  </body>
</html>


Output:

Reference link: https://get.foundation/sites/docs/dropdown-menu.html#vertical



Last Updated : 25 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads