Foundation CSS Menu Sass Reference
Last Updated :
01 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.
A Menu in Foundation CSS is a navigation list that contains the different components that redirect to the various linked pages in the websites or web applications.
Variable Used:
| Variable-Name |
Description |
Type |
Default-Value |
| $menu-margin |
This variable is used to define the margin of a menu. |
Number |
0
|
| $menu-nested-margin |
This variable is used to define the left-hand margin of a nested menu. |
Number |
$global-menu-nested-margin
|
| $menu-items-padding |
This variable is used to define the padding for items in a pill menu. |
Number |
$global-menu-padding
|
| $menu-simple-margin |
This variable is used to define the margin for items in a simple menu. |
Number |
1rem |
| $menu-item-color-active |
This variable is used to define the text color of an active menu item. |
Color |
$white
|
| $menu-item-color-alt-active |
This variable is used to define the alternative text color of an active menu item.. |
Color |
$black
|
| $menu-item-background-active |
This variable is used to define the background color of an active menu item. |
Color |
get-color(primary)
|
| $menu-icon-spacing |
This variable is used to define the spacing between an icon and text in a menu item. |
Number |
0.25rem |
| $menu-state-back-compat |
This variable is used to define the backward compatibility for menu state. |
Boolean |
true |
| $menu-centered-back-compat |
This variable is used to define the backward compatibility for menu centered. If true, this duplicate . |
Boolean |
true |
| $menu-icons-back-compat |
This variable is used to define the Backward compatibility for using icon-* classes without .icons classes But please note that this backward compatibility will be removed in upcoming versions. |
Boolean |
true |
Example 1: In the below code, we will make use of the above variable to demonstrate the use of the Menu.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body style="margin: 20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
A computer science portal for geeks
</h3>
<div class="card" style="width: 300px;">
<div class="card-divider">
GeeksforGeeks
</div>
<ul class="menu">
<li>
<a href="#">
Placement Course
</a>
</li>
<li>
<a href="#">
DSA
</a>
</li>
<li>
<a href="#">
Algorithms
</a>
</li>
</ul>
</div>
</center>
</body>
</html>
|
SASS Code:
$menu-margin:0;
.menu {
margin:$menu-margin;
}
Compiled CSS Code:
.menu {
margin: 0;
}
Output:
Example 2: In the below code, we will make use of the above variable to demonstrate the use of the Menu.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body style="margin: 20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
A computer science portal for geeks
</h3>
<div class="card" style="width: 300px;">
<div class="card-divider">
GeeksforGeeks
</div>
<ul class="menu">
<li>
<a href="#">
Placement Course
</a>
</li>
<li>
<a href="#">
DSA
</a>
</li>
<li>
<a href="#">
Algorithms
</a>
</li>
</ul>
</div>
</center>
</body>
</html>
|
SASS Code:
$menu-simple-margin :1rem;
.menu {
margin:$menu-simple-margin;
}
Compiled CSS Code:
.menu {
margin: 1rem;
}
Output:
Reference: https://get.foundation/sites/docs/menu.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...