Open In App

Foundation CSS Accordion Menu Basics

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.

Accordion Menu is used to convert the basic vertical menu into the 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. In this article, we will discuss the basics of the Accordion Menu in Foundation CSS.

Foundation CSS Accordion Menu Basics Classes:

  • menu: It is used to create the basic menu.
  • accordion-menu: It is used to change the vertical basic menu into the accordion menu.

Syntax:

<ul class="menu accordion-menu" data-accordion-menu>
  ......
</ul>

Example 1: The following code demonstrates the Accordion Menu Basics.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h3>Foundation CSS Accordion Menu Basics</h3>
    </center>
  
    <ul class="vertical menu accordion-menu" 
        data-accordion-menu>
        <li>
            <a href="#">Home</a>
            <ul class="menu vertical nested">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
            </ul>
        </li>
        <li><a href="#">Explore</a>
            <ul class="menu vertical nested">
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
            </ul>
        </li>
        <li><a href="#">About us</a></li>
    </ul>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

Example 2: The following code demonstrates the Accordion Menu Basics with more menus and sub-menus.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
        crossorigin="anonymous">
  
    <!-- Compressed JavaScript -->
    <script src=
    </script>
    <script src=
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h3>Foundation CSS Accordion Menu Basics</h3>
    </center>
  
    <ul class="vertical menu accordion-menu" data-accordion-menu>
        <li>
            <a href="#">Home</a>
            <ul class="menu vertical nested">
                <li><a href="#">Item 1</a>
                    <ul class="menu vertical nested">
                        <li><a href="#">Item 1A</a>
                            <ul class="menu vertical nested">
                                <li><a href="#">Item 1A 1</a></li>
                                <li><a href="#">Item 1A 2</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Item 1B</a></li>
                        <li><a href="#">Item 1C</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 2</a></li>
            </ul>
        </li>
        <li><a href="#">Explore</a>
            <ul class="menu vertical nested">
                <li><a href="#">Item A</a>
                    <ul class="menu vertical nested">
                        <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="#">About us</a></li>
    </ul>
  
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
  
</html>


Output:

Reference link: https://get.foundation/sites/docs/accordion-menu.html#basics



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