Introduction
This chapter below demonstrates the W3CSS Dropdowns these are used hide some list of content when user click or hover on dropdown button then the content will be visible and the following are the concepts are covered in this chapter.
- Dropdown classes and Elements
- Types of Dropdowns
Description
Dropdowns are used to hide some content which ia available when user mouse hover over an drop down element. Following are the some classes to define the drop down classes.
The image below demonstrates to creating a Dropdown element as shown.
The code below demonstrates to create the dropdown elements as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Dropdown Button</h2>
<p>Move the mouse over the button to open the dropdown content.</p>
<div class="w3-dropdown-hover">
<button class="w3-btn w3-blue">Hover Over Me!</button>
<div class="w3-dropdown-content w3-border">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
| Class | Description |
|---|---|
| w3-dropdown-hover | Which is an hoverable dropdown element. |
| w3-dropdown content | Which is used to display an drop down content. |
| w3-dropdown-click | Which is used to display clickable dropdown element. |
Description
W3.CSS have several types of drop downs to hide the content in which some are clickable buttons and hoverable buttons which are listed below.
Menu Dropdowns
User can create the perfect navigation bar with Drop down menus by using the w3-dropdown-hover class. which creates drop down menu in navigation bar. The code below demonstrates the Menu Dropdowns as shown below.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<body>
<div class="w3-container">
<h2>Navigation Bar with Dropdown</h2>
<p>Add a dropdown menu inside a navigation bar:</p>
<ul class="w3-navbar w3-card-2 w3-blue">
<li><a href="#">Home</a></li>
<li><a href="#">W3.CSS</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown <i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">HTML</a>
<a href="#">HTML5</a>
<a href="#">CSS</a>
</div>
</li>
</ul>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Clickable Dropdowns
User can also create clickable drop downs by using the w3-dropdown-click class and which is opened by the JavaScript. The code below demonstrates the Clickable drop downs as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-btn w3-blue">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-border">
<a href="#">SVG</a>
<a href="#">CSS</a>
<a href="#">W3.CSS</a>
</div>
</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>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Right-aligned Dropdowns
User can also place the drop down content at right side by using the w3-right class. If user wants to use w3-right or w3-left user need to clear all float values. The code below demonstrates the Right aligned Drop downs.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Right-aligned Dropdown</h2>
<p>Use the w3-right class to float the dropdown to the right, and use CSS to position the dropdown content.</p>
<div class="w3-dropdown-hover w3-right">
<button class="w3-btn w3-blue">Dropdown</button>
<div class="w3-dropdown-content w3-border" style="right:0">
<a href="#">HTML</a>
<a href="#">HTML5</a>
<a href="#">CSS</a>
</div>
</div>
<div class="w3-clear"></div>
<p>User need to clear floats if user used w3-righ or w3-left.</p>
</div>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Animated Dropdowns
In W3.CSS Usr can fade, zoom or slide in the drop down content by using the w3-animated-classes. The code below demonstrates the Animated Drop downs as shown.
[html]
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="w3-container">
<h2>Animated Dropdown</h2>
<p>Use any of the w3-animate-classes to fade, zoom or slide in the dropdown content.</p>
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-btn">Click me</button>
<div id="Demo" class="w3-dropdown-content w3-card-4 w3-animate-zoom">
<a href="#">HTML</a>
<a href="#">HTML5</a>
<a href="#">CSS</a>
</div>
</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>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
- Menu Dropdowns
- Clickable Dropdowns
- Right aligned Dropdowns
- Animated Dropdowns
Key Points
- By using w3-animated-class user will get animated Dropdowns.
- User can align dropdown box at right or left.
- Dropdown boxes are clickable and hoverable.