Skip to content
Related Articles

Related Articles

Foundation CSS Accordion Menu

View Discussion
Improve Article
Save Article
  • Last Updated : 17 Mar, 2022
View Discussion
Improve Article
Save Article

Foundation CSS is the frontend framework of CSS that is used to build responsive websites, apps, and emails that work perfectly on any device. It is written using HTML, CSS, and Javascript and is used by many famous companies like Amazon, Facebook, eBay, etc. It uses packages like Grunt and Libsass for fast coding and controlling and Saas compiler to make development faster.

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 then 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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!