Hamburger menu css javascript | responsive hamburger menu html css javascript

Hamburger menu css javascript | responsive hamburger menu HTML css javascript




Hamburger menu css javascript | responsive hamburger menu html css javascript



Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create a Hamburger menu css javascript. We use HTML & CSS and javascript for this  Hamburger menu css javascript. Hope you enjoy our blog so let's start with a basic HTML structure for a Hamburger menu css javascript.

HTML code for Hamburger menu 

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
   <meta charset="UTF-8">  
   <meta http-equiv="X-UA-Compatible" content="IE=edge">  
   <meta name="viewport" content="width=device-width, initial-scale=1.0">  
   <title>Ig_Deves</title>  
   <link rel="stylesheet" href="style.css">  
   <link rel="preconnect" href="https://fonts.gstatic.com">  
 <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500&display=swap" rel="stylesheet">  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />  
 </head>  
 <body>  
   <!-- Navbar Here -->  
   <nav class="navbar">  
     <div class="navbar__container">  
       <a href="#home" id="navbar__logo">Ig Developers</a>  
       <div class="navbar__toggle" id="mobile-menu">  
         <span class="bar"></span>  
         <span class="bar"></span>  
         <span class="bar"></span>  
       </div>  
       <ul class="navbar__menu">  
         <li class="navbar__item">  
           <a href="#home" class="navbar__links" id="home-page">Home</a>  
         </li>  
         <li class="navbar__item">  
           <a href="#category" class="navbar__links" id="category-page">IG Category</a>  
         </li>  
         <li class="navbar__item">  
           <a href="#about" class="navbar__links" id="about-page">About</a>  
         </li>  
         <li class="navbar__btn">  
           <a href="#join" class="button" id="join-page">Join In Category</a>  
         </li>  
       </ul>  
     </div>  
   </nav>  
   <script src="app.js"></script>  
 </body>  
 </html>  
There is all HTML code for the Hamburger menu. Now, you can see output without CSS, then we write CSS for the Hamburger menu.
output
Hamburger menu css javascript | responsive hamburger menu html css javascript

CSS Code for Hamburger menu

 *{  
   box-sizing: border-box;  
   margin: 0;  
   padding: 0;  
   font-family: 'Poppins', sans-serif;  
   scroll-behavior: smooth;  
 }  
 .navbar {  
   background: #eee;  
   height: 80px;  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   font-size: 1.2rem;  
   position: sticky;  
   top: 0;  
   z-index: 999;  
 }  
 .navbar__container{  
   display: flex;  
   justify-content: space-between;  
   height: 80px;  
   z-index: 1;  
   width: 100%;  
   max-width: 1300px;  
   margin: 0 auto;  
   padding: 0 50px;  
 }  
 #navbar__logo{  
 background-color: #ff8177;  
 background-image: linear-gradient(to top,#ff0844 0%, #ffb199 100%);  
 background-size: 100%;  
 -webkit-background-clip: text;  
 -moz-background-clip: text;  
 -webkit-text-fill-color: transparent;  
 -moz-text-fill-color: transparent;  
 display: flex;  
 align-items: center;  
 cursor: pointer;  
 text-decoration: none;  
 font-size: 2rem;  
 }  
 .navbar__menu{  
 display: flex;  
 align-items: center;  
 list-style: none;  
 }  
 .navbar__item{  
   height: 80px;  
 }  
 .navbar__links{  
   color: #000;  
   display: flex;  
   align-items: center;  
   justify-content: center;  
   width: 125px;  
   text-decoration: none;  
   height: 100%;  
   transition: all 0.3s ease;  
 }  
 .navbar__btn{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   padding: 0 1rem;  
   width: 100%;  
 }  
 .button{  
   display: flex;  
   justify-content: center;  
   align-items: center;  
   text-decoration: none;  
   padding: 10px 20px;  
   height: 100%;  
   width: 100%;  
   border: none;  
   outline: none;  
   border-radius: 5px;  
   background: #833ab4;  
   color: #fff;  
   transition: all 0.3s ease;  
 }  
 .navbar__links:hover{  
   color: #9518fc;  
   transition: all 0.3s ease;  
 }  
 @media screen and (max-width: 960px) {  
   .navbar__container{  
     display: flex;  
     justify-content: space-between;  
     height: 80px;  
     z-index: 1;  
     width: 100%;  
     max-width: 1300px;  
     padding: 0;  
   }  
   .navbar__menu{  
     display: grid;  
     grid-template-columns: auto;  
     margin: 0;  
     width: 100%;  
     position: absolute;  
     top: -1000px;  
     opacity: 1;  
     transition: all 0.5s ease;  
     z-index: -1;  
   }  
   .navbar__menu.active{  
     background: #010101;  
     top: 100%;  
     opacity: 1;  
     transition: all 0.5s ease;  
     z-index: 99;  
     height: 60vh;  
     font-size: 1.6rem;  
   }  
   #navbar__logo{  
     padding-left: 25px;  
   }  
   .navbar__toggle .bar{  
     width: 25px;  
     height: 3px;  
     margin: 5px auto;  
     transition: all 0.3s ease;  
     background: #000;  
   }  
   .navbar__item{  
     width: 100%;  
   }  
   .navbar__links{  
     text-align: center;  
     padding: 2rem;  
     width: 100%;  
     display: table;  
     color: #fff;  
   }  
   .navbar__btn{  
     padding-bottom: 2rem;  
   }  
   .button{  
     display: flex;  
     justify-content: center;  
     align-items: center;  
     width: 80%;  
     height: 80px;  
     margin: 0;  
   }  
   #mobile-menu{  
     position: absolute;  
     top: 20%;  
     right: 5%;  
     transform: translate(5%,20%);  
   }  
   .navbar__toggle .bar{  
     display: block;  
     cursor: pointer;  
   }  
   #mobile-menu.is-active .bar:nth-child(2){  
   opacity: 0;  
   }  
   #mobile-menu.is-active .bar:nth-child(1){  
   transform: translateY(8px) rotate(45deg);  
   }  
   #mobile-menu.is-active .bar:nth-child(3){  
   transform: translateY(-8px) rotate(-45deg);  
   }  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output
Hamburger menu css javascript | responsive hamburger menu html css javascript

Now add javascript for when we click on a hamburger, navigation pop-up!

Javascript code for Hamburger menu

 const menu = document.querySelector('#mobile-menu');  
 const menuLinks = document.querySelector('.navbar__menu');  
 // Display mobile menu  
 const mobieMenu = () =>{  
 menu.classList.toggle('is-active')  
 menuLinks.classList.toggle('active')  
 }  
 menu.addEventListener('click', mobieMenu)  
 function myFunction() {  
   document.getElementById("demo").innerHTML = "Hello World";  
  }  
Final output

Hamburger menu css javascript | responsive hamburger menu html css javascript

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the Hamburger menu. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Hamburger menu using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post