Foundation CSS Accordion Menu

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=
"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/foundation/6.0.1/js/vendor/jquery.min.js">
        </script>
    <script
        src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
        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:

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=
"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/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script
        src=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"
        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:

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

Foundation CSS Accordion Menu

Foundation CSS Accordion Menu Class:

Syntax:

Explore