Foundation CSS Drilldown Menu autoHeight

Last Updated : 22 Mar, 2022

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 that 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 helpful to transform into a series of nested lists into a vertical drill-down menu so that the menu’s height can be adapted to all the sizes of devices. This takes the height of the tallest menu in the hierarchy. The autoHeight can be used to adjust the height of the webpage with respect to the viewport so that the web page’s content will be visible to all sizes of devices.

Foundation CSS Drilldown Menu Class:

vertical menu drilldown: This class is used to create the drilldown menu vertically oriented.

Foundation CSS Drilldown Menu Attribute:

data-drilldown: This attribute is helpful to align the data that drill to open in a vertical manner.
data-auto-height: This attribute can be used to set the height of the menu, to render the menu content to all sizes of devices.
data-animate-height: This attribute is used to animate the height adjustment of the menu data.

Syntax:

<ul class="vertical menu drilldown" data-drilldown data-auto-height="true">
    Content
</ul>

Example 1: In this example, the text below the menu helps us to understand how auto height works. As the height of the menu changes, the text below moves up and down accordingly, as auto height is set to true.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Drilldown Menu autoHeight</title> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1" /> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous" /> 
</head> 
  
<body> 
    <center> 
        <h2 style="color: green">GeeksforGeeks</h2> 
        <h4>Foundation CSS Drilldown Menu autoHeight</h4> 
    </center> 
    <ul class="menu vertical" 
        data-drilldown data-auto-height="true" 
        data-animate-height="true"> 
        <li> <a href="#">Courses</a> 
            <ul class="menu vertical nested"> 
                <li> 
                    <a href="#">DSA</a> 
                </li> 
                <li> 
                    <a href="#">GATE</a> 
                </li> 
                <li> 
                    <a href="#">Datascience</a> 
                </li> 
                <li> 
                    <a href="#">Full stack development</a> 
                </li> 
            </ul> 
        </li> 
        <li> 
            <a href="#">Programming languages</a> 
            <ul class="menu vertical nested"> 
                <li> 
                      <a href="#">Python</a> 
                  </li> 
                <li> 
                      <a href="#">Java</a> 
                  </li> 
                <li> 
                      <a href="#">Javascript</a> 
                  </li> 
                <li> 
                      <a href="#">R</a> 
                  </li> 
                <li> 
                      <a href="#">php</a> 
                  </li> 
            </ul> 
        </li> 
        <li> 
              <a href="#">Job</a> 
          </li> 
        <li> 
              <a href="#">Login</a> 
          </li> 
    </ul> 
    <div class="row"> 
        <div class="columns"> 
            <p> 
                Foundation CSS is an open-source responsive 
                front-end framework that includes a responsive grid, 
                as well as HTML and CSS UI components, templates,  
                and code snippets for typography, forms, buttons,  
                navigation, and other interface elements, as well as 
                optional JavaScript extensions. ZURB formerly maintained 
                Foundation, which is an open-source project. Volunteers  
                have been maintaining the Foundation since 2019.  
            </p> 
        </div> 
    </div> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
    <script type="text/javascript"> 
        $(document).foundation(); 
    </script> 
</body> 
</html>

Output:

Setting the autoHeight to true

Example 2: This example describes the Drilldown Menu autoHeight without setting the autoHeight to true in Foundation CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Foundation CSS Drilldown Menu autoHeight</title> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1" /> 
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
          crossorigin="anonymous" /> 
</head> 
  
<body> 
    <center> 
        <h2 style="color: green">GeeksforGeeks</h2> 
        <h4>Foundation CSS Drilldown Menu autoHeight</h4> 
    </center> 
    <ul class="menu vertical" 
        data-drilldown data-animate-height="true"> 
        <li> <a href="#">Courses</a> 
            <ul class="menu vertical nested"> 
                <li> 
                    <a href="#">DSA</a> 
                </li> 
                <li> 
                    <a href="#">GATE</a> 
                </li> 
                <li> 
                    <a href="#">Datascience</a> 
                </li> 
                <li> 
                    <a href="#">Full stack development</a> 
                </li> 
            </ul> 
        </li> 
        <li> <a href="#">Programming languages</a> 
            <ul class="menu vertical nested"> 
                <li> 
                    <a href="#">Python</a> 
                </li> 
                <li> 
                    <a href="#">Java</a> 
                </li> 
                <li> 
                    <a href="#">Javascript</a> 
                </li> 
                <li> 
                    <a href="#">R</a> 
                </li> 
                <li> 
                    <a href="#">php</a> 
                </li> 
            </ul> 
        </li> 
        <li> 
            <a href="#">Job</a> 
        </li> 
        <li> 
            <a href="#">Login</a> 
        </li> 
    </ul> 
    <div class="row"> 
        <div class="columns"> 
            <p> 
              Foundation CSS is an open-source responsive front-end framework that 
              includes a responsive grid, as well as HTML and CSS UI components, 
              templates, and code snippets for typography, forms, buttons, 
              navigation, and other interface elements, as well as optional 
              JavaScript extensions. ZURB formerly maintained Foundation, which is 
              an open-source project. Volunteers have been maintaining the 
              Foundation since 2019. 
            </p> 
        </div> 
    </div> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
</html>