css responsive menu | CSS animated Menu

css responsive menu | CSS animated Menu

css responsive menu | CSS animated Menu

Welcome🎉 to codewithrandom blog in this blog we learn that how we create 
css responsive menu | CSS animated Menu  . We use HTML & css  & javascript for this css responsive menu | CSS animated Menu. Hope you enjoy our blog so let's start with a basic HTML structure for css responsive menu | CSS animated Menu .

HTML for css 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 CSS animated Menu. Now you can see output without css then we write css for our CSS animated Menu.

Output of HTML

css responsive menu | CSS animated Menu

CSS for CSS animated 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 section, now we need only JavaScript functionality for add close and open hamburger menu . Here is our updated output with css.

HTML - CSS project ideas by Code With Random


css responsive menu | CSS animated Menu

CSS animated Menu Javascript 

 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 JavaScript coding for CSS animated Menu. You can an output video at bottom.

css responsive menu | CSS animated Menu



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

In this post, we learn how to create  css responsive menu | CSS animated Menu  with simple coding of HTML & css and javascript. If we did a mistake or any confusion please drop a comment so give a reply or help you in easy learning.

bootstrap navbar - responsive  bootstrap navbar 

written by - codewithrandom/Anki 

Post a Comment

Previous Post Next Post