 |
VOOZH | about |
|
VOOZH | about |
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 is based on Bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.
Dropdown is used to display the content when we click the element. We can put any type of content in the dropdown and access it by clicking the element. The dropdown is revealed when we click the element or hover over it. In this article, we will discuss dropdown basics in Foundation CSS.
Variable Used:
| Variable-Name | Description | Type | Default-Value |
|---|---|---|---|
| $dropdown-padding | This variable is used to define the padding for dropdown panes. | List | 1rem |
| $dropdown-background | This variable is used to define the background for dropdown panes. | Color | $body-background |
| $dropdown-border | This variable is used to define the border for dropdown panes. | List | 1px solid $medium-gray |
| $dropdown-font-size | This variable is used to define the font size for dropdown panes. | List | 1rem |
| $dropdown-width | This variable is used to define the width of dropdown panes. | Number | 300px |
| $dropdown-radius | This variable is used to define the border radius dropdown panes. | Number | $global-radius |
| $dropdown-sizes | This variable is used to define the sizes for dropdown panes. Each size is a CSS class you can apply. | Map | tiny: 100px small: 200px large: 400px |
Example 1: In the below code, we will use the above variable to demonstrate the use of the dropdown.
SASS Code:
$dropdown-padding: 2px;
.dropdown-pane {
padding:$dropdown-padding;
}
Compiled CSS Code:
.dropdown-pane {
padding: 2px;
}
Output:
Example 2: In the below code, we will use the above variable to demonstrate the use of the dropdown.
SASS Code:
$dropdown-background: lightgreen;
.dropdown-pane {
background-color:$dropdown-background;
}
Compiled CSS Code:
.dropdown-pane {
background-color: lightgreen;
}
Output:
