Foundation CSS Accordion Submenu Toggle
Last Updated :
28 Feb, 2022
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 accordion menu. Accordion Submenu Toggle is used to make the parent item have its link as well as it allows the submenu to open or close. It means we can have the link as well as the Accordion menu of the same parent item. When we toggle the item then the hyperlink will be opened and if we click the dropdown icon then the submenu will be opened. We use the accordion-menu class and data-submenu-toggle=”true” attribute to make it work correctly. In this article, we will discuss how to create the Accordion Submenu Toggle in Foundation CSS.
Foundation CSS Accordion Submenu Toggle Class:
- accordion-menu: It is used to create the accordion menu.
Syntax:
<ul class="vertical menu accordion-menu"
data-accordion-menu data-submenu-toggle="true">
<li>
<a href="URL">.....</a>
<ul class="menu vertical nested">
......
</ul>
</li>
</ul>
Example 1: The following code demonstrates the Accordion Submenu Toggle.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous"></script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Accordion Submenu Toggle</h3>
</center>
<ul class="vertical menu accordion-menu"
data-accordion-menu data-submenu-toggle="true">
<li>
Open GeeksforGeeks, or open dropdown →</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="#">Home</a>
<ul class="menu vertical nested">
<li><a href="#">Item A</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Accordion Submenu Toggle with menus and submenus toggle.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
crossorigin="anonymous">
<script src=
</script>
<script src=
crossorigin="anonymous">
</script>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Foundation CSS Accordion Submenu Toggle</h3>
</center>
<ul class="vertical menu accordion-menu"
data-accordion-menu data-submenu-toggle="true">
<li>
Open GeeksforGeeks, or open dropdown →</a>
<ul class="menu vertical nested">
<li><a href="#">Item 1</a></li>
<li><a href="">Item 2</a>
<ul class="vertical menu accordion-menu nested"
data-accordion-menu data-submenu-toggle="true">
<li><a href="#">Item 1</a></li>
target="_blank">
Open GFG or dropdown →
</a>
<ul class="menu vertical nested">
<li><a href="#">Item 2A</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
<li>
<a href="#">Home</a>
<ul class="menu vertical nested">
<li><a href="#">Item A</a></li>
<li><a href="#">Item A</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
</ul>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/accordion-menu.html#submenu-toggle
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...