Open In App

Foundation CSS Kitchen Sink Accordion Menu

Improve
Improve
Like Article
Like
Save
Share
Report

Foundation CSS is the free, open-source front-end CSS framework used to build beautiful, responsive websites, applications, and emails that work on any type of device. It is written using HTML, CSS, and Javascript. It is used by many companies like Amazon, Facebook, Disney, etc. It uses Saas compiler for faster development and uses packages like Grunt and Libsass for fast coding and controlling.  

Kitchen Sink has the foundation elements to work well in our websites and applications. Accordion Menu is the collapsible horizontal or vertical menu with some effects. This menu can be created horizontally or vertically and menu items can be arranged in a horizontal or vertical manner.

Foundation CSS Kitchen Sink Accordion Menu Classes:

  • menu: This class is used to create the menu.
  • vertical: This class is used to create the vertical menu.
  • horizontal: This class is used to create the horizontal menu.

Syntax:

<ul class="vertical menu" data-accordion-menu>
  <li>
    <a href="#">Menu 1/a>
    <ul class="menu vertical nested is-active">
      <li>
        <a href="#">sub-item 1</a>
      </li>
      <li><a href="#">sub-item 2</a></li>
      <li><a href="#">sub-item 3</a></li>
    </ul>
  </li>
</ul>

Example 1: 

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Kitchen Sink Accordion Menu</title>
    <link rel="stylesheet"
          href=
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>Foundation CSS Kitchen Sink Accordion Menu</h3>
 
    <ul class="vertical menu" data-accordion-menu>
        <li>
            <a href="#">Menu 1</a>
            <ul class="menu vertical nested is-active">
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#0">Menu 2</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="#">Menu 3</a></li>
    </ul>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
 
</html>


Output:

Foundation CSS Kitchen Sink Accordion Menu

Foundation CSS Kitchen Sink Accordion Menu

Example 2:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Foundation CSS Kitchen Sink Accordion Menu</title>
    <link rel="stylesheet"
          href=
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <h3>Foundation CSS Kitchen Sink Accordion Menu</h3>
 
    <ul class="horizontal menu" data-accordion-menu>
        <li>
            <a href="#">Menu 1</a>
            <ul class="menu horizontal nested is-active">
                <li><a href="#">Item 1</a>
 
                    <ul class="menu horizontal nested">
                        <li><a href="#">sub-item 1A</a></li>
                        <li><a href="#">sub-item 1B</a></li>
                    </ul>
                </li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
            </ul>
        </li>
        <li>
            <a href="#0">Menu 2</a>
            <ul class="menu horizontal nested">
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
    </ul>
 
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</body>
 
</html>


Output:

Foundation CSS Kitchen Sink Accordion Menu

Foundation CSS Kitchen Sink Accordion Menu

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



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