ADVERTISEMENT

Animated Responsive Menu Using HTML,CSS and JavaScript

Telegram Group Join Now

ADVERTISEMENT

Animated Responsive Menu Using HTML,CSS and JavaScript

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

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Portfolio Website using HTML and CSS (Source Code)

Here is our updated output with HTML + CSS.

 

ADVERTISEMENT

Animated Responsive Menu Using HTML,CSS and JavaScript

 

ADVERTISEMENT

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

 

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

written by – codewithrandom/Anki

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT