W3.CSS Dropdowns
Hoverable Dropdowns
Dropdowns display additional content when the user hovers over or clicks an element.
W3.CSS provides classes for both hoverable and clickable dropdowns.
The w3-dropdown-hover class creates a hoverable dropdown.
The w3-dropdown-content class defines the content that appears.
Example
<div class="w3-dropdown-hover">
<button class="w3-button">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Both the hoverable element and the dropdown content element can be any HTML element.
In the example above the hover element was a <button>, and the dropdown content a <div>.
In the next example the hover element is a <p>, and the dropdown content is a <span>:
Example
<p class="w3-dropdown-hover">Hover over me!
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>
Dropdown Menus
Dropdowns can be placed inside a bar to create a dropdown menu:
Example
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">About</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown ▾</button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
You will learn more about Navigation Bars later in this tutorial.
Clickable Dropdowns
The w3-dropdown-click class creates a clickable dropdown.
JavaScript is used to add or remove the w3-show class:
Example
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button">Click Me</button>
<div id="demo" class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
<script>
function myFunction() {
document.getElementById("demo").classList.toggle("w3-show");
}
</script>
Right-Aligned Dropdowns
Example
<div class="w3-flex" style="justify-content:flex-end">
<div class="w3-dropdown-hover">
<button class="w3-button w3-black">Dropdown</button>
<div class="w3-dropdown-content w3-bar-block w3-border" style="right:0">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</div>
The w3-flex class class justify the content to the right (flex-end).
right:0 makes the dropdown content align with the right edge of the button.
What You Have Learned
In this chapter you have learned how to:
- Create hoverable dropdowns with
w3-dropdown-hover - Create dropdown content with
w3-dropdown-content - Create clickable dropdowns with
w3-dropdown-click - Use dropdowns inside bars
- Right-align dropdowns
- Use images, cards, and animations in dropdown content
More Examples
Explore more ways to use dropdowns.
Image Dropdown
A dropdown can display a larger version of an image:
Move the mouse over the image:
Example
<div class="w3-dropdown-hover">
<img src="img_snowtops.jpg" alt="Norway" style="width:20%">
<div
class="w3-dropdown-content" style="width:300px">
<img src="img_snowtops.jpg"
alt="Norway" style="width:100%">
</div>
</div>
Card Dropdowns
Move the mouse over one of the cities below:
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.
Tokyo is the capital city of Japan.
It has 13 million inhabitants.
Example
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content
w3-card-4" style="width:300px">
<img src="img_london.jpg"
alt="London" style="width:100%">
<div
class="w3-container">
<p>London is the
capital city of England.</p>
<p>It is the
most populous city in the UK.</p>
</div>
</div>
</div>
Animated Dropdown
Use any of the w3-animate- classes to fade, zoom or slide in the dropdown content:
Example
<div class="w3-dropdown-click">
<button onclick="myFunction()"
class="w3-button">Click Me</button>
<div id="Demo"
class="w3-dropdown-content w3-bar-block w3-animate-zoom">
<a href="#"
class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
