Foundation CSS Accordion Menu Sass Reference
Last Updated :
07 Sep, 2022
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 created with HTML, CSS, and Javascript and is utilized by numerous well-known businesses, like Amazon, Facebook, eBay, and others. It uses packages like Grunt and Libsass for fast coding and controlling and the 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.
Variable Used:
Variable-Name |
Description |
Type |
Default-Value |
$accordionmenu-padding |
This variable is used to define the accordion menu padding. |
Number |
$global-menu-padding |
$accordionmenu-nested-margin |
This variable is used to set the accordion menu nested margin. |
Number |
$global-menu-nested-margin |
$accordionmenu-submenu-padding |
This variable is used to set the accordion menu submenu padding. |
Number |
$accordionmenu-padding |
$accordionmenu-arrows |
This variable is used to set if accordion menus have the default arrow styles. |
Boolean |
true |
$accordionmenu-arrow-color |
This variable is used to set the accordion menu arrow color if the arrow is used. |
Color |
$primary-color |
$accordionmenu-item-background |
This variable is used to set the accordion menu item padding. |
Color |
null |
$accordionmenu-border |
This variable is used to Set the accordion menu item border. |
Color |
null |
$accordionmenu-submenu-toggle-background |
This variable is used to set accordion menu item padding. |
Color |
null |
$accordion-submenu-toggle-border |
This variable is used to Set the accordion menu item padding. |
List |
$accordionmenu-border |
$accordionmenu-submenu-toggle-width |
This variable is used to set the accordion menu submenu toggle background width. |
Number |
40px |
$accordionmenu-submenu-toggle-height |
This variable is used to set the accordion menu submenu toggle background height. |
Number |
$accordionmenu-submenu-toggle-width |
$accordionmenu-arrow-size |
This variable is used to sets the accordion menu arrow size if the arrow is used. |
Length |
6px |
Example 1: In the below code, we will use the above variable to demonstrate the use of the 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 >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< center >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >
A computer science portal for geeks
</ 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 >
|
SASS Code:
$accordionmenu-padding: 50px;
.nested{
padding:$accordionmenu-padding;
}
Compiled CSS Code:
.nested {
padding: 50px; }
Output:
Example 2: In the below code, we will use the above variable to demonstrate the use of the 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 >
< link rel = "stylesheet" href = "style.css" >
</ head >
< body >
< center >
< h1 style = "color: green;" >
GeeksforGeeks
</ h1 >
< h3 >
A computer science portal for geeks
</ 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 >
|
SASS Code:
$accordionmenu-border: 2px solid black;
.nested{
border:$accordionmenu-border;
}
Compiled CSS Code:
.nested {
border: 2px solid black; }
Output:
Reference: https://get.foundation/sites/docs/accordion-menu.html
Share your thoughts in the comments
Please Login to comment...