Animated Responsive Menu Using HTML,CSS and JavaScript

 

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div class="icon"></div>
</nav>

There is all Html Code for Animated Responsive Menu. Now you can see output without Css and JavaScript Code, then we write Css for styling the menu, and using javascript we give an animated Menu Effect.

50+ HTML, CSS & JavaScript Projects With Source Code

Html Code Output

CSS Code For Animated Responsive Menu

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: aliceblue;
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-family: "Montserrat";
font-size: 18px;
}
ul {
background-color: white;
border-radius: 4px;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
box-shadow: -7px 9px 17px 0px #00000017;
}
li a {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: black;
}
li:hover a {
color: crimson;
}
nav {
position: relative;
}
.icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: -80px;
height: 60px;
width: 60px;
border-radius: 50%;
background-color: rgb(255, 255, 255);
background-image: url(https://image.flaticon.com/icons/svg/545/545705.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 50%;
cursor: pointer;
box-shadow: 0px 0px 17px 0px #00000017;
transition: 0.5s ease transform;
}
.icon.close {
transform: translateY(-50%) rotate(360deg);
background-image: url(https://image.flaticon.com/icons/svg/748/748122.svg);
}
ul {
width: 0px;
overflow: hidden;
transform: translateX(50px);
opacity: 0;
pointer-events: none;
transition: 0.5s ease;
padding: 20px;
}
nav.show ul {
width: 450px;
transform: translate(0px);
opacity: 1;
pointer-events: all;
}
nav {
position: absolute;
top: 10px;
right: 100px;
}
@media only screen and (max-width: 768px) {
body {
font-size: 14px;
}
li a {
padding: 5px 10px;
}
nav ul {
padding: 15px;
}
nav.show ul {
width: 260px;
}
.icon {
width: 45px;
height: 45px;
right: -50px;
}
nav {
top: 10px;
right: 60px;
}
}

Now we complete our Css Code section. now we need only JavaScript Code for functionality for adding a close and open Animated Responsive Menu.

Portfolio Website using HTML and CSS (Source Code)

Here is our updated output with HTML + CSS.

 

 

JavaScript Code For Animated Responsive Menu

const icon = document.querySelector(".icon");
const nav = document.querySelector("nav");
icon.addEventListener("click", () => {
icon.classList.toggle("close");
nav.classList.toggle("show");
});

Now we completed all our Html, Css, and JavaScript codes for CSS Animated Responsive Menu. You can an output video at the bottom.

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Live Preview Of Animated Responsive Menu

 

 

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

In this post, we learn how to create an Animated Responsive Menu Using HTML, CSS, and JavaScript. If we did a mistake or any confusion please drop a comment to give a reply or help you in easy learning.

You can visit our other useful blog for collecting fronted development knowledge. thank you for visiting our website !

written by – codewithrandom/Anki