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
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
Reference: https://get.foundation/sites/docs/accordion-menu.html