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/foundation-sites@6.7.4/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/foundation-sites@6.5.1/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/foundation-sites@6.7.4/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/foundation-sites@6.5.1/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

Suggest improvement

Foundation CSS Menu Simple Style

Foundation CSS Media Object Sass Reference

Share your thoughts in the comments

Foundation CSS Dropdown Menu Sass Reference

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?