Responsive Navigation Bar with Dropdown Menu using JavaScript

203
0

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:

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 --------------------- */  
Ashutosh Tiwari
WRITTEN BY

Ashutosh Tiwari

Hey there, I'm Ashutosh Tiwari AKA InCoder and I'm a front-end and back-end developer. I create blogs, and I love helping people through my knowledgeable content. My content is all about coding and front-end design. When I'm not creating content, you can find me reading books and listening to podcasts. I set up this Buy Me a Coffee account to help support my work, as creating content takes time and effort. Every contribution helps me continue doing what I love and improving the quality of my content. Thank you so much for your support and for being a part of my journey!

Newsletter

Loading