How to create a responsive navigation bar with dropdown?
We can add a dropdown menu to the navigation bar to add extra links to pages in the navigation bar.
In this tutorial, we will be creating a responsive navbar with a dropdown.
Responsive Navbar with dropdown
The navbar will have placed horizontally for the large screens. But for the small screen, we will place the navbar vertically. A hamburger menu will be added to hide and show elements on the navbar.
- Use
@media rule to create the responsive navbar.
- The hamburger icon will be hidden by default using
display: none property which will float: right for small screen.
- The responsive navbar will be
position:relative whereas the icon will position: absolute.
- Use text-align: left to align it to the left.
- Also, use
display: block so that links are stacked one after another.
- JavaScript
onclick() event is added to the hamburger menu to open it on click.
Example: Creating a responsive navbar with dropdown
In this example, we created a responsive navbar with dropdown by using CSS properties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
overflow: hidden;
background-color: cyan;
}
.navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 20px;
}
.active {
background-color: #04AA6D;
color: white;
}
.navbar .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .btn {
font-size: 20px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-menu {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-menu a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.navbar a:hover, .dropdown:hover .btn {
background-color: #555555;
color: white;
}
.dropdown-menu a:hover {
background-color: #cccccc;
color: black;
}
.dropdown:hover .dropdown-menu {
display: block;
}
@media screen and (max-width: 600px) {
.navbar a:not(:first-child), .dropdown .btn {
display: none;
}
.navbar a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.navbar.responsive {position: relative;}
.navbar.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
.navbar.responsive .dropdown {float: none;}
.navbar.responsive .dropdown-menu {position: relative;}
.navbar.responsive .dropdown .btn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
</head>
<body>
<div class="navbar" id="nav">
<a href="#" class="active">Home</a>
<a href="#">course</a>
<a href="#">More</a>
<div class="dropdown">
<button class="btn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-menu">
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
</div>
</div>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">☰</a>
</div>
<div class = "text">
<h2>Responsive navbar with Dropdown</h2>
<p>Change the size to browser to see effects</p>
<p>Hover over the dropdown to open it.</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("nav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
}
}
</script>
</body>
</html>
Output
Here is the output of the above code.
For wider screen
For smaller screen
Example: Responsive navbar with dropdown
In the above example, The first item of the responsive navbar was visible but here we have hidden the first item too. Also, we have used float: left to place the hamburger to the left of the navbar.
Conclusion
In this tutorial, we have learned to add a dropdown to the responsive navbar. The dropdown will be placed vertically with other items in the navbar. We can hover the dropdown to show items in it.
