Dropdowns are one of the most important parts of an interactive website. A dropdown menu is the collection of menu items that allow users to choose a value from the list. W3.CSS also provides classes to make a smooth and responsive dropdown menu. There are two types of dropdown menu available i.e. hoverable and clickable. The classes available for dropdown are as follows:
Sr. No. |
Class Name |
Description |
---|---|---|
1. |
w3-dropdown-content |
It is used to make the content of the dropdown menu. |
2. |
w3-dropdown-hover |
It is used to make a hoverable dropdown element. |
3. |
w3-dropdown-click |
It is used to make a clickable dropdown menu. |
Example: Creating a hoverable dropdown menu.
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" </ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text colour to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
< h2 class = "w3-text-green w3-xxlarge" >GeeksForGeeks</ h2 >
</ div >
<!-- Hoverable Dropdown Menu in W3.CSS -->
< div class = "w3-container w3-center" >
<!-- Hoverable Dropdown Menu -->
< div class = "w3-dropdown-hover w3-round-large" >
< button class =
"w3-button w3-hover-blue w3-pink w3-round-large" >
Hover Over Me!
</ button >
< div class = "w3-dropdown-content w3-bar-block w3-border" >
< a href = "#" class = "w3-bar-item w3-button" >
Gfg
</ a >
< a href = "#" class = "w3-bar-item w3-button" >
GeeksForGeeks
</ a >
< a href = "#" class = "w3-bar-item w3-button" >
Geek
</ a >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
- Before Hover:
- After Hover:
Example: Creating a clickable dropdown menu.
<!DOCTYPE html> < html >
< head >
<!-- Adding W3.CSS file through external link -->
< link rel = "stylesheet" <!-- Function to show and hide dropdown menu -->
< script >
function show() {
var x = document.getElementById("gfg");
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</ script >
</ head >
< body >
<!-- w3-container is used to add 16px
padding to any HTML element. -->
<!-- w3-center is used to set the content
of the element to the center. -->
< div class = "w3-container w3-center" >
<!-- w3-text-green sets the text color to green. -->
<!-- w3-xxlarge sets font size to 32px. -->
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
<!-- Hoverable Dropdown Menu in W3.CSS -->
< div class = "w3-container w3-center" >
<!-- Hoverable Dropdown Menu -->
< div class = "w3-dropdown-click w3-round-large" >
< button onclick = "show()" class = "w3-button w3-blue w3-round-large" >
Click Me!
</ button >
< div id = "gfg" class = "w3-dropdown-content w3-bar-block w3-border" >
< a href = "#" class = "w3-bar-item w3-button" >Gfg</ a >
< a href = "#" class = "w3-bar-item w3-button" >
GeeksForGeeks
</ a >
< a href = "#" class = "w3-bar-item w3-button" >Geek</ a >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
- Before Click:
- After Click: