Hello friends, today in this blog, we will learn how to responsive navigation bar with a dropdown menu using JavaScript. In our previous blog, we saw how to create a currency converter using Javascript and API. You can check my other javascript projects after reading this blog.
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.
Note:
You can check live demo and download code files from here.
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 & Javascript 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 --------------------- */
Top comments (0)