Foundation CSS Accordion Menu ScrollTop Drilldown

Last Updated : 08 Dec, 2022

Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to lay out nice responsive websites, apps, and emails and can be accessible to any device.

Accordion Menu is used to convert the basic vertical menu into an expandable menu with the help of the Accordion Menu plugin. When we want to convert the basic menu into the accordion menu then add the attribute data-accordion-menu.

ScrollTop Drilldown: This tool is very useful for longer menus and provides a better user experience. ScrollTop Drilldown scrolls to the top of the menu when selecting a submenu or just going back to the previous menu. To use the ScrollTop Drilldown feature change the value of the data-scroll-top attribute to “true”.

Syntax:

<ul class="vertical menu drilldown" data-drilldown 
    data-scroll-top="true">
    ...
</ul>

Example 1: The following code shows a basic ScrollTop Drilldown Menu.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Drilldown Menu</title>
 
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"
        crossorigin="anonymous">
 
    <!-- Compressed JavaScript -->
    <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"
           crossorigin="anonymous">
    </script>
</head>
 
<body style="padding:30px;" width="1100px">
 
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <strong>Foundation CSS ScrollTop Drilldown Menu</strong><br/><br />
 
    <div class="row">
        <div class="columns">
            <ul class="vertical menu drilldown"
                data-drilldown data-scroll-top="true">
                <li><a href="#">GFG</a></li>
                <li><a href="#">GFG</a></li>
                <li><a href="#">GFG</a></li>
                <li><a href="#">GFG</a></li>
                <li><a href="#">GFG</a></li>
                <li><a href="#">GFG</a></li>
                <li> <a href="#">GFG</a>
                    <ul class="vertical menu">
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a></li>
                        <li><a href="#">GFG</a>
                            <ul class="vertical menu">
                                <li><a href="#">GFG</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">GFG</a></li>
            </ul>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Output:

Example 2: The following code shows a basic ScrollTop Drilldown Menu.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Foundation CSS Kitchen Sink Drilldown Menu</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" />
 
    <!-- Compressed JavaScript -->
    <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>
</head>
 
<body style="padding:2rem 1rem;">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Foundation CSS ScrollTop Drilldown Menu</h3>
    <br/>
    <div class="row">
        <div class="columns">
            <ul class="vertical menu drilldown" data-drilldown 
                data-scroll-top="true" style="max-width:180px">
                <li><a href="#">java</a>
                    <ul class="menu">
                        <li>
                            <a href="#">basic</a>
                            <ul class="menu">
                                <li><a href="#Item-1Aa">
                                    high level
                                    </a>
                                </li>
                                <li><a href="#Item-1Ba">
                                   inheritance
                                   </a>
                                </li>
                            </ul>
                        </li>
                        <li><a href="#Item-1B">GFG</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">c++</a>
                    <ul class="menu">
                        <li><a href="#Item-2A">
                            c++ compiler</a>
                        </li>
                        <li><a href="#Item-2B">
                            c++ application 
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">python</a>
                    <ul class="menu">
                        <li><a href="#Item-3A">
                            data science
                            </a>
                        </li>
                        <li><a href="#Item-3B">
                            machine learning
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
</body>
</html>