Foundation CSS Dropdown Basics
Last Updated :
17 Mar, 2022
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. Dropdown is revealed when we click the element or hover over it. In this article, we will discuss Dropdown Basics in Foundation CSS.
Foundation CSS Dropdown Basics Class:
- dropdown-pane: This class is used to create the dropdown pane.
Syntax:
<div class="dropdown-pane" data-dropdown>
.....
</div>
Example 1: The following code demonstrates the Foundation CSS Dropdown Basics when we click the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Dropdown Basics</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>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Foundation CSS Dropdown Basics </h3>
<button class="button secondary"
type="button"
data-toggle="dropdownBasic">
Click Dropdown
</button>
<div class="dropdown-pane"
id="dropdownBasic"
data-dropdown
data-auto-focus="true">
<strong>
GeeksforGeeks:
</strong>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles.
</p>
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
Output:
Foundation CSS Dropdown Basics
Example 2: The following code demonstrates the Foundation CSS Dropdown Basics when we hover over the element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Foundation CSS Dropdown Basics</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>
</head>
<body>
<center>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Foundation CSS Dropdown Basics </h3>
<button class="button alert"
type="button"
data-toggle="dropdownBasic">
Hover Dropdown
</button>
<div class="dropdown-pane"
id="dropdownBasic"
data-dropdown
data-hover="true"
data-hover-pane="true">
<strong>
GeeksforGeeks:
</strong>
<label>
Hover Dropdown
<input type="text"
placeholder="Computer Science portal">
</label>
</div>
</center>
<script>
$(document).foundation();
</script>
</body>
</html>
Output:
Foundation CSS Dropdown Basics
Reference: https://get.foundation/sites/docs/dropdown.html#basics
Similar Reads
Foundation CSS Dropdown 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
4 min read
Foundation CSS Dropdown Menu 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 Button Dropdown Arrows 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 Dropdown Positioning 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 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