Animated Responsive Menu Using HTML,CSS and JavaScript

Animated Responsive Menu Using HTML,CSS and JavaScript

Animated Responsive Menu Using HTML,CSS and JavaScript
Animated Responsive Menu Using HTML,CSS and JavaScript

 

Welcome to the codewithrandom blog. In this blog, we learn how to create an Animated Responsive Menu. We use HTML, CSS, and JavaScript for this Animated Responsive Menu.

I hope you enjoy our blog so let’s start with a basic Html Structure for Animated Responsive Menu.

HTML Code For Animated Responsive Menu

<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

Animated Responsive Menu Using HTML,CSS and JavaScript

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.

 

Animated Responsive Menu Using HTML,CSS and JavaScript

 

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

 

Animated Responsive Menu Using HTML,CSS and JavaScript

 

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



Leave a Reply