W3.CSS Dropdown
Last Updated :
02 Mar, 2021
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.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
</ head >
< body >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >GeeksForGeeks</ h2 >
</ div >
< div class = "w3-container w3-center" >
< 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:
Example: Creating a clickable dropdown menu.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet"
< 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 >
< div class = "w3-container w3-center" >
< h2 class = "w3-text-green w3-xxlarge" >
GeeksForGeeks
</ h2 >
</ div >
< div class = "w3-container w3-center" >
< 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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...