HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
W3.CSS provides the following dropdown classes
W3.CSS provides the following dropdown classes:
Class | Defines |
---|---|
w3-dropdown-hover | A hoverable dropdown element |
w3-dropdown-content | The dropdown part to be displayed |
w3-dropdown-click | A clickable dropdown element |
The w3-dropdown-hover class defines a hoverable dropdown element.
The w3-dropdown-content class defines the dropdown content to be displayed.
<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>:
<p class="w3-dropdown-hover">Hover over me!
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>
The w3-dropdown-hover class is perfect for creating navigation bars with dropdown menues:
<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">Link
1</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>
Note: You will learn more about Navigation Bars later in this tutorial.
The w3-dropdown-click class creates a clickable dropdown element.
With this class, the dropdown is opened by JavaScript:
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">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() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
Move the mouse over the image:
<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>
Move the mouse over one of the cities below:
London
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
Tokyo is the capital city of Japan.
13 million inhabitants.
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content
w3-card-4" style="width:250px">
<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>
Use any of the w3-animate-classes to fade, zoom or slide in the dropdown content:
<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>
Use the w3-right class to float the dropdown to the right. Use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left instead of left to right):
<div class="w3-dropdown-hover w3-right">
<button class="w3-button">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>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { var x = document.getElementById("myDropdown"); if (x.classList) { x.classList.toggle("w3-show"); } else { // Fallback for IE9 and earlier if (x.className.indexOf("w3-show") == -1) x.className = x.className + " w3-show"; else x.className = x.className.replace("w3-show", ""); } } function myFunction2() { var x = document.getElementById("myDropdown2"); if (x.classList) { x.classList.toggle("w3-show"); } else { // Fallback for IE9 and earlier if (x.className.indexOf("w3-show") == -1) x.className = x.className + " w3-show"; else x.className = x.className.replace("w3-show", ""); } }