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 

Share on:

Leave a Comment