Foundation CSS Dropdown Menu Sass Reference

Last Updated : 09 Sep, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

The dropdown menu is used for displaying an expandable dropdown menu by using the Foundation CSS plugin.

Variable Used:

Variable-Name	Description	Type	Default-Value
$dropdownmenu-arrows	This variable is used to define the enable arrows for items with dropdown menus.	Boolean	true
$dropdownmenu-arrow-color	This variable is used to define the set dropdown menu arrow color if an arrow is used.	Color	$anchor-color
$dropdownmenu-arrow-size	This variable is used to define the set dropdown menu arrow size if an arrow is used.	Length	6px
$dropdownmenu-arrow-padding	This variable is used to define the sets dropdown menu arrow padding for aligning the arrow correctly.	Length	1.5rem
$dropdownmenu-min-width	This variable is used to define the minimum width of the dropdown sub-menus.	Length	200px
$dropdownmenu-background	This variable is used to define the background color for top-level items.	Color	null
$dropdownmenu-submenu-background	This variable is used to define the background color for dropdowns.	Color	$white
$dropdownmenu-padding	This variable is used to define the padding for top level items.	Number	$global-menu-padding
$dropdownmenu-nested-margin	This variable is used to define the sets dropdown menu nested margin	Number	0
$dropdownmenu-submenu-padding	This variable is used to define the padding for sub-menu items.	List	$dropdownmenu-padding
$dropdownmenu-border	This variable is used to define the border for the dropdown sub-menus.	Color	1px solid $medium-gray
$dropdown-menu-item-color-active	This variable is used to define the text color of an active dropdown menu item.	Color	get-color(primary)
$dropdown-menu-item-background-active	This variable is used to define the background color of an active dropdown menu item.	Color	transparent

Example 1: In the below code, we will make use of the above variable to demonstrate the use of the dropdown Menu.

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Dropdowns</title>
    
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
        crossorigin="anonymous">

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
    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="dropdown menu" data-dropdown-menu>
        <li>
            <a href="#">Tutorials</a>
            <ul class="menu">
                <li><a href="#">Practice DS & Algo.</a></li>
                <li><a href="#">Algorithms</a></li>
                <li><a href="#">Data Structures</a></li>
                <li><a href="#">Interview Corner</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">CS Subjects</a></li>
                <li><a href="#">GATE</a></li>
                <li><a href="#">Web Technologies</a></li>
            </ul>
        </li>
        <li><a href="#">Student</a>
            <ul class="menu">
                <li><a href="#">Campus Ambassador Program</a></li>
                <li><a href="#">School Ambassador Program</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">Geek Of the Month</a></li>
                <li><a href="#">Placement Course</a></li>
                <li><a href="#">Competitive Programming</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Careers</a></li>
            </ul>
        </li>
        <li><a href="#">Jobs</a>
            <ul class="menu">
                <li><a href="#">Apply for Jobs</a></li>
                <li><a href="#">Post a Job</a></li>
            </ul>
        </li>
        <li><a href="#">Courses</a></li>
    </ul>
 
    <script>
        $(document).foundation();
    </script>
</body>
</html>

SASS Code:

$dropdownmenu-arrow-padding    : 1.5rem;
.dropdown {
   padding:$dropdownmenu-arrow-padding;
}

Compiled CSS Code:

.dropdown {
  padding: 1.5rem; 
}

Output:

Example 2: In the below code, we will make use of the above variable to demonstrate the use of the dropdown menu.

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Dropdowns</title>
    
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css"
         crossorigin="anonymous">

    <!-- Compressed JavaScript -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js"
    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="dropdown menu" data-dropdown-menu>
        <li>
            <a href="#">Tutorials</a>
            <ul class="menu">
                <li><a href="#">Practice DS & Algo.</a></li>
                <li><a href="#">Algorithms</a></li>
                <li><a href="#">Data Structures</a></li>
                <li><a href="#">Interview Corner</a></li>
                <li><a href="#">Languages</a></li>
                <li><a href="#">CS Subjects</a></li>
                <li><a href="#">GATE</a></li>
                <li><a href="#">Web Technologies</a></li>
            </ul>
        </li>
        <li><a href="#">Student</a>
            <ul class="menu">
                <li><a href="#">Campus Ambassador Program</a></li>
                <li><a href="#">School Ambassador Program</a></li>
                <li><a href="#">Project</a></li>
                <li><a href="#">Geek Of the Month</a></li>
                <li><a href="#">Placement Course</a></li>
                <li><a href="#">Competitive Programming</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Careers</a></li>
            </ul>
        </li>
        <li><a href="#">Jobs</a>
            <ul class="menu">
                <li><a href="#">Apply for Jobs</a></li>
                <li><a href="#">Post a Job</a></li>
            </ul>
        </li>
        <li><a href="#">Courses</a></li>
    </ul>
 
    <script>
        $(document).foundation();
    </script>
</body>
</html>

SASS Code:

$dropdownmenu-min-width : 200px;
.dropdown {
   min-width: $dropdownmenu-min-width;
}

Compiled CSS Code:

.dropdown top-level{
  min-width: 200px; 
}

Output:

Reference: https://get.foundation/sites/docs/dropdown-menu.html

Foundation CSS Dropdown Sass Reference

krishna_97

Improve

Article Tags :

Foundation CSS Dropdown Menu Sass Reference

Similar Reads

Thank You!

What kind of Experience do you want to share?