Open In App

Foundation CSS Drilldown Menu

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. 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 drilldown menu is one of Foundation CSS’s three menu patterns. This converts a series of nested lists into a vertical drilldown menu. To make a drilldown menu, we use the standard Menu syntax, using <ul>, <li>, and <a> and add the “data-drilldown” class along with “vertical menu drilldown” classes to the root menu to set up the drilldown. 

To create sub-menus, we place a <ul> next to an <a>, that <a> will then open the <ul> that it’s next to. The anchor tags without a submenu will function as a normal link. To nest another menu inside the main menu, we use the “menu vertical nested” classes to the nested <ul> tag.

Foundation CSS Drilldown Menu Classes:

  • vertical menu drilldown: These classes are applied to the<ul> tag. This converts an unordered list to a drilldown menu.
  • menu vertical nested: These classes are applied to the<ul> tag. This converts a nested unordered list to a sub-menu of the drilldown menu.

Syntax:

<ul class="vertical menu drilldown" data-drilldown>
    <li><a href="#">Title</a></li>
    ...
</ul>

Example 1: This example demonstrates the drill-down menu made using the foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Drilldown Menu</title>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
    <!-- Compressed JavaScript -->
    <script src=
        crossorigin="anonymous"></script>
</head>
  
<body style="padding: 30px;">
    <center>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <strong>Foundation CSS Drilldown Menu</strong><br/><br/>
    </center>
    <ul class="vertical menu drilldown" data-drilldown style="max-width: 200px" data-drilldown>
        <li><a href="#">Tutorial</a></li>
        <li><a href="#">Student</a></li>
        <li><a href="#">Job</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Courses</a></li>
        <li><a href="#">Programs</a></li>
        <li><a href="#">Intern</a></li>
        <li><a href="#">Career</a></li>
      </ul>
      <script>
          $(document).foundation();
      </script>
</body>
  
</html>


Output:

Output

Example 2: This example demonstrates the nested drill-down menu made using the foundation CSS.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>Foundation CSS Drilldown Menu</title>
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
    <!-- Compressed JavaScript -->
    <script src=
        crossorigin="anonymous"></script>
</head>
  
<body style="padding: 30px;">
    <center>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <strong>Foundation CSS Drilldown Menu</strong><br/><br/>
    </center>
    <ul class="vertical menu drilldown" data-drilldown style="max-width: 200px" data-drilldown>
        <li><a href="#">Tutorial</a></li>
        <li>
          <a href="#">Student</a>
          <ul class="menu vertical nested">
            <li><a href="#">Campus Ambassador Program</a></li>
            <li><a href="#">School Ambassador Program</a></li>
            <li><a href="#">Project</a></li>
            <li><a href="#">Geek of month</a></li>
            <li><a href="#">Campus Geek of month</a></li>
            <li><a href="#">Placement course</a></li>
            <li><a href="#">Internship</a></li>
            <li><a href="#">Testimonial</a></li>
          </ul>
        </li>
        <li><a href="#">Job</a></li>
        <li><a href="#">Login</a></li>
      </ul>
      <script>
          $(document).foundation();
      </script>
</body>
  
</html>


Output:

Output

Reference: https://get.foundation/sites/docs/drilldown-menu.html



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