Open In App

Foundation CSS Accordion Menu Sass Reference

Improve
Improve
Like Article
Like
Save
Share
Report

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>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <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>
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
  
    <!-- Compressed JavaScript -->
    <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



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