Open In App

Foundation CSS Accordion Menu

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS Accordion Menu is used to convert the basic vertical menu into an expandable accordion menu. To convert the menu into an accordion menu the data-accordion-menu attribute is used. In this article, we will discuss Foundation CSS Accordion Menu.

Foundation CSS Accordion Menu Class:

  • accordion-menu: This class is used to convert the basic menu into the accordion menu.

Syntax:

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

Example 1: The following code demonstrates the Foundation CSS Accordion Menu.

HTML




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


Output:

Foundation CSS Accordion Menu

Foundation CSS Accordion Menu

Example 2: The following code demonstrates the Foundation CSS Accordion Menu with menu and sub-menus.

HTML




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


Output:

Foundation CSS Accordion Menu

Foundation CSS Accordion Menu

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



Last Updated : 19 Sep, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads