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
Similar Reads
Foundation CSS Dropdown Sass Reference Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
3 min read
Foundation CSS Menu Sass Reference 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,
3 min read
Foundation CSS Accordion Menu Sass Reference 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 lik
3 min read
Foundation CSS Dropdown Menu JavaScript Reference Foundation CSS is an open-source and responsive front-end framework built by the ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing and can be accessible to any device. The Dropdown Menu is used for displaying an expanda
6 min read
Foundation CSS Vertical Dropdown Menu Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. This framework
3 min read