Foundation CSS Accordion Menu
Last Updated :
19 Sep, 2023
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 >
< link rel = "stylesheet"
href =
< 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 >
< link rel = "stylesheet"
href =
< 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
Share your thoughts in the comments
Please Login to comment...