In today's digital world, having a responsive navigation bar is essential for a user-friendly and smooth browsing experience. Navigation bars provide a quick and easy way for users to navigate through a website's pages, making them a crucial element of web design. Additionally, dropdown menus have become increasingly popular in recent years, allowing for a more organized and streamlined user experience. In this blog post, we will explore how to create a responsive navigation bar with a dropdown menu using JavaScript. We will walk through the steps of setting up the HTML and CSS for the navigation bar, adding the dropdown menu, and implementing the JavaScript code to make the dropdown menu functional. By the end of this tutorial, you will better understand how to create a responsive and user-friendly navigation bar that includes a dropdown menu using JavaScript.
This project has a navigation menu as you can see in the image above. There is a logo named incoder in the left section. Then there are links in the center link named HTML & CSS has a Dropdown. When you click on it dropdown menu will be opened. There is a search button a window will be opened when you click on it. Unable to understand what am I saying then check the live demo. Scroll down to see the demo.
Let's Set up the Project
- Create a new folder for your project and name it something descriptive.
- Inside the project folder, create a new file called index.html. This will be your main HTML file.
- Open index.html in a code editor such as Visual Studio Code.
- Inside the head section of index.html, create a new link element that links to your CSS file. The link element should look like this: "<link rel="stylesheet" href="styles.css">" Make sure to replace styles.css with the name of your CSS file.
- Save the changes to index.html.
- In the same project folder, create a new file called styles.css. This will be your main CSS file.
- Open styles.css in a code editor.
- Write your CSS rules inside styles.css.
- Save the changes to styles.css.
- In the head section of index.html, create a new script element that links to your JavaScript file. The script element should look like this: "<script src="script.js"></script>" Make sure to replace script.js with the name of your JavaScript file.
- Save the changes to index.html.
- In the same project folder, create a new file called script.js. This will be your main JavaScript file.
- Open script.js in a code editor.
- Write your JavaScript code inside script.js.
- Save the changes to script.js.
Now you have successfully created a basic HTML, CSS, and JavaScript file and linked them together. Any changes you make to your CSS or JavaScript files will be reflected in your index.html file when you refresh the page.
You may like these:
- How to create an image editor using cropper.js
- How to create a file downloader via URL using pure javascript
- Building a Custom QR Code Generator with qrcode.js and JavaScript
- Filterable Image Gallery with preview using HTML, CSS, and Javascript
Code of HTML, CSS, and JavaScript Files
Here's the good news: you don't have to write all the code of this project from scratch! I have created a GitHub repository that contains all the HTML, CSS, and JavaScript code needed to build the app. You can check it out and use it as a starting point for your own project.
HTML & JS Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- --------------------- Created By InCoder --------------------- -->
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>
Navbar - InCoderWeb
</title>
<link href="main.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</link>
</link>
</meta>
</meta>
</meta>
</head>
<body class="darkMode">
<nav class="inNavbar">
<button class="toggleSidebar">
<i class="fa-solid fa-bars">
</i>
</button>
<a class="logo" href="">
InCoder
</a>
<ul>
<a href="javascript:void(0)">
<li>
Home
</li>
</a>
<a class="dropdownMenuToggler" data-dropdowntoggler href="javascript:void(0)">
<li>
HTML & CSS
<i class="fa-solid fa-angle-down">
</i>
</li>
<div class="dropdownMenu">
<li>
Example 1
</li>
<li>
Example 2
</li>
<li>
Example 3
</li>
<li>
Example 4
</li>
</div>
</a>
<a href="javascript:void(0)">
<li>
Javascript
</li>
</a>
<a href="javascript:void(0)">
<li>
React JS
</li>
</a>
<a href="javascript:void(0)">
<li>
PHP
</li>
</a>
</ul>
<div class="searchBtn">
<i class="fa-solid fa-magnifying-glass">
</i>
</div>
<div class="wrapper">
<div class="inSidebar">
<button class="closeSidebarBtn">
<i class="fa-solid fa-xmark">
</i>
</button>
<div class="links">
<ul>
<a href="javascript:void(0)">
<li>
Home
</li>
</a>
<a class="dropdownMenuToggler" data-dropdowntoggler="" href="javascript:void(0)">
<li>
HTML & CSS
<i class="fa-solid fa-angle-right" style="float: right;">
</i>
</li>
<div class="dropdownMenu">
<li>
Example 1
</li>
<li>
Example 2
</li>
<li>
Example 3
</li>
<li>
Example 4
</li>
</div>
</a>
<a href="javascript:void(0)">
<li>
Mega Menu
</li>
</a>
<a href="javascript:void(0)">
<li>
Javascript
</li>
</a>
<a href="javascript:void(0)">
<li>
PHP
</li>
</a>
</ul>
</div>
<div class="inSidebar-footer">
<div class="socialIcons">
<a href="">
<i class="fa-brands fa-facebook">
</i>
</a>
<a href="">
<i class="fa-brands fa-twitter">
</i>
</a>
<a href="">
<i class="fa-brands fa-youtube">
</i>
</a>
<a href="">
<i class="fa-brands fa-instagram">
</i>
</a>
<a href="">
<i class="fa-brands fa-github">
</i>
</a>
</div>
<div class="quickLinks">
<a href="">
About
</a>
<a href="">
Contact us
</a>
<a href="">
Privacy Policy
</a>
<a href="">
Terms & Conditions
</a>
</div>
</div>
</div>
</div>
<div class="searchDialog">
<div class="searchDialogWrapper">
<div class="inputWrapper">
<input class="inSearchInput" placeholder="Search here" type="text">
<button class="closeDialogBtn">
<i class="fa-solid fa-xmark">
</i>
</button>
</input>
</div>
</div>
</div>
</nav>
<script>
let toggleSidebarBtn = document.querySelector('.toggleSidebar')
closeSidebarBtn = document.querySelector('.closeSidebarBtn')
sidebar = document.querySelector('.inNavbar .wrapper')
searchDialog = document.querySelector('.inNavbar .searchDialog')
searchBtn = document.querySelector('.inNavbar .searchBtn')
closeDialogBtn = document.querySelector('.closeDialogBtn')
dropDownToggler = document.querySelectorAll(".dropdownMenuToggler")
// dropdownMenu = document.querySelector(" .dropdownMenu")
dropDownToggler.forEach((dropdown) => {
dropdown.addEventListener("click", () => {
dropdown.querySelector(".dropdownMenu").classList.toggle("active")
})
})
searchBtn.addEventListener('click', () => {
searchDialog.classList.add('active')
})
closeDialogBtn.addEventListener('click', () => {
searchDialog.classList.remove('active')
})
toggleSidebarBtn.addEventListener('click', () => {
sidebar.classList.add('inSidebar-active')
})
closeSidebarBtn.addEventListener('click', () => {
sidebar.classList.remove('inSidebar-active')
})
sidebar.addEventListener('click', (e) => {
if (sidebar.classList.contains('inSidebar-active')) {
if (!document.querySelector('.inSidebar').contains(e.target)) {
sidebar.classList.remove('inSidebar-active')
}
}
})
</script>
</body>
</html>
CSS Code
@import url("https://fonts.googleapis.com/css2?family=Amaranth:ital,wght@0,400;0,700;1,400;1,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Amaranth", sans-serif;
}
:root {
--mainColor: #2db485;
--mainLightColor: rgb(45, 180, 133, 0.28);
}
/* --------------------- InNavbar Start --------------------- */
.inNavbar {
width: 100%;
display: flex;
height: 3.5rem;
align-items: center;
padding-left: 1.5rem;
padding-right: 1.5rem;
justify-content: space-between;
box-shadow: 0 5px 20px 0px #0000001a;
}
body.darkMode .inNavbar {
background: rgb(17 24 40);
}
.inNavbar .logo {
color: #000c;
font-size: 1.5rem;
text-decoration: none;
transition: color 0.1s ease-in-out;
}
body.darkMode .inNavbar .logo {
color: #ffffff;
}
.inNavbar ul {
display: flex;
}
.inNavbar ul a {
color: #000c;
text-decoration: none;
transition: color 0.1s ease-in-out;
}
.inNavbar ul a.dropdownMenuToggler {
position: relative;
}
.dropdownMenu {
opacity: 0;
top: 2.6rem;
left: -.8rem;
width: 10rem;
cursor: auto;
position: absolute;
pointer-events: none;
border-radius: .3rem;
box-shadow: 0 0 20px 0px #00000040;
transform: translateY(-1rem);
transition: transform .2s ease-in-out;
}
.inSidebar .dropdownMenu {
top: 1.8rem;
left: 15.8rem;
width: 10rem;
cursor: auto;
opacity: 0;
position: absolute;
pointer-events: none;
border-radius: .3rem;
box-shadow: 0 0 20px 0px #00000040;
transition: transform .2s ease-in-out;
transform: translateX(-1rem)!important;
}
.inSidebar .dropdownMenu.active {
transform: translateX(0)!important;
}
body.darkMode .dropdownMenu {
color: #fff;
background: #111829;
}
.dropdownMenu.active {
opacity: 1;
pointer-events: all;
transform: translateY(0)!important;
}
.dropdownMenu li {
width: 100%;
height: 2rem;
cursor: pointer;
margin-top: .5rem;
margin-bottom: .5rem;
color: #000c!important;
margin-left: 0rem!important;
transition: background .3s ease;
}
.inSidebar .dropdownMenu>li {
width: 100%;
display: flex!important;
justify-content: center!important;
text-align: center;
height: 2rem!important;
cursor: pointer;
margin-top: .5rem!important;
margin-bottom: .5rem;
color: #000c!important;
margin-left: 0rem!important;
transition: background .3s ease!important;
}
body.darkMode .dropdownMenu li {
color: rgb(250 250 250 / 80%)!important;
}
.dropdownMenu li:hover {
background: var(--mainLightColor);
}
.inNavbar ul li i {
margin-left: .5rem;
}
body.darkMode .inNavbar ul a {
color: rgb(250, 250, 250, 0.8);
}
.inNavbar ul a:hover, .inNavbar .logo:hover {
color: var(--mainColor);
}
body.darkMode .inNavbar ul a:hover, body.darkMode .inNavbar .logo:hover {
color: var(--mainColor);
}
.inNavbar ul li {
display: flex;
list-style: none;
margin-left: 1rem;
margin-right: 1rem;
align-items: center;
justify-content: center;
}
.searchBtn {
width: 2.5rem;
display: flex;
height: 2.5rem;
cursor: pointer;
font-size: 1.2rem;
align-items: center;
border-radius: 0.5rem;
justify-content: center;
transition: background 0.19s ease-in-out;
}
body.darkMode .searchBtn {
color: rgb(250, 250, 250);
}
.searchBtn:hover {
background: var(--mainLightColor);
}
.toggleSidebar {
border: 0;
width: 2.5rem;
display: none;
height: 2.5rem;
cursor: pointer;
font-size: 1.2rem;
align-items: center;
border-radius: 0.5rem;
justify-content: center;
background-color: transparent;
transition: background 0.19s ease-in-out;
}
.closeSidebarBtn {
border: 0;
top: 1rem;
right: 2rem;
color: #fff;
width: 2.5rem;
height: 2.5rem;
position: fixed;
cursor: pointer;
font-size: 1.2rem;
align-items: center;
border-radius: 0.5rem;
justify-content: center;
background-color: rgb(37 38 40 / 39%);
transition: background 0.19s ease-in-out;
}
body.darkMode .closeSidebarBtn {
background-color: rgb(98 106 124 / 39%);
}
body.darkMode .toggleSidebar {
color: rgb(250, 250, 250);
}
.toggleSidebar:hover {
background: var(--mainLightColor);
}
.inNavbar .wrapper {
top: 0;
left: -100vw;
width: 100vw;
height: 100vh;
position: fixed;
transition: all 0s;
background-color: rgba(27, 27, 37, 0.6);
backdrop-filter: saturate(100%) blur(2px);
-o-backdrop-filter: saturate(100%) blur(3px);
-ms-backdrop-filter: saturate(100%) blur(3px);
-webkit-backdrop-filter: saturate(100%) blur(3px);
}
.inNavbar .wrapper.inSidebar-active {
left: 0rem;
}
.inNavbar .inSidebar {
top: 0;
left: -100vw;
width: 15rem;
height: 100vh;
z-index: 9999;
position: fixed;
background: #ffffff;
transition: all 0.4s cubic-bezier(0, 0.85, 1, 1.01);
}
.inNavbar .wrapper.inSidebar-active .inSidebar {
left: 0rem;
}
.inNavbar .inSidebar .links {
height: auto;
}
.inNavbar .inSidebar .links ul {
margin-top: 2rem;
font-size: 1.2rem;
display: block !important;
}
.inNavbar .inSidebar .links ul li {
height: 2.5rem;
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: space-between;
transition: all 0.2s cubic-bezier(0, 0.85, 1, 1.01);
}
.inNavbar .inSidebar .links ul li:hover {
margin-left: 1.4rem;
}
body.darkMode .inNavbar .inSidebar {
background: rgb(17 24 40);
}
.inSidebar-footer {
bottom: 0;
position: absolute;
padding-top: .5rem;
padding-bottom: .7rem;
border-top: 1px solid #ffffff12;
}
.inSidebar-footer .socialIcons {
margin-bottom: .5rem;
}
.inSidebar-footer .socialIcons a {
color: #000c;
margin-left: .6rem;
margin-right: .6rem;
}
body.darkMode .inSidebar-footer .socialIcons a {
color: #ffffffc4;
}
body.darkMode .inSidebar-footer .socialIcons a:hover {
color: var(--mainColor);
}
.inSidebar-footer .socialIcons a:hover {
color: var(--mainColor);
}
.inSidebar-footer .quickLinks {
margin-left: .6rem;
}
.inSidebar-footer .quickLinks a {
color: #000c;
margin-right: .3rem;
}
body.darkMode .inSidebar-footer .quickLinks a {
color: #ffffffc4;
}
body.darkMode .inSidebar-footer .quickLinks a:hover {
color: var(--mainColor);
}
.inSidebar-footer .quickLinks a:hover {
color: var(--mainColor);
}
.searchDialog {
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: none;
position: fixed;
background: #0000004d;
backdrop-filter: blur(2px);
}
body.darkMode .searchDialog {
background: #111829;
}
.searchDialog.active {
display: block;
}
.closeDialogBtn {
border: 0;
width: 2.6rem;
cursor: pointer;
font-size: 1.2rem;
margin-left: .4rem;
color: #000000b5;
margin-right: .4rem;
border-radius: .5rem;
background: #ffffff;
}
.closeDialogBtn:hover {
color: #000000e0;
}
.searchDialogWrapper .inputWrapper {
display: flex;
margin-top: 1.2rem;
justify-content: space-around;
}
.searchDialogWrapper .inputWrapper input {
border: 0;
width: 90%;
height: 2.5rem;
font-size: 1.2rem;
margin-left: .4rem;
color: #000000b5;
padding-left: .8rem;
border-radius: .5rem;
}
body.darkMode .searchDialogWrapper .inputWrapper input {
color: #ffffffbf;
background: #111829;
border: 2px solid #ffffff30;
transition: all .2s ease-in-out;
}
body.darkMode .searchDialogWrapper .inputWrapper input:focus {
border: 2px solid #ffffff9e;
}
body.darkMode .closeDialogBtn {
color: #ffffff87;
background: #111829;
border: 2px solid #ffffff30;
transition: all .2s ease-in-out;
}
body.darkMode .closeDialogBtn:hover {
color: #ffffffe0;
border: 2px solid #ffffff96;
}
.searchDialogWrapper .inputWrapper input:focus {
outline: none;
}
@media (max-width: 690px) {
.inNavbar ul {
display: none;
}
.toggleSidebar {
display: flex;
}
}
/* --------------------- InNavbar End --------------------- */
Here is the Final Output of this Code
Hurray! now you've created a Responsive Navigation Bar with Dropdown Menu 😎. You can download files by clicking on the download button after downloading file if you are facing any kind of problem feel free to ask me in the comment section and you can also contact me via e-mail. Thanks for giving your precious time for reading this blog. Here is the download button:-