Animated Hamburger Menu in HTML CSS JavaScript

CodingNepal — Thu, 24 Feb 2022 21:11:19 +0000

Hello friend, I hope you are doing awesome. Today we are going to create the most useful elements that are added to the major side navigation bar and it is called Hamburger Menu with animation by using HTML CSS JavaScript. As you know recently I have created all types of Hamburger Menus.

Generally, Hamburger Menu or Hamburger Toggle button looks like hamburger food that we eat. This type of element is mostly used on the side navigation bar to open and close them.

Let’s have a look at the given image of our Hamburger Menu. On the left side, you can see three-line inside the white box, which is called hamburger and when we click on it, those two lines change into a cross and one disappears, and also background changes with the beautiful animation.

Now we are going to watch the real demo of this project [Animated Hamburger Menu], and of course all the codes that I have used to create this hamburger menu and its animation.

Animated Hamburger Menu in HTML CSS JavaScript

I have provided all the HTML CSS and JavaScript source code that I have used to create this Hamburger Menu with Beautiful Animtion. Before jumping into the source, you need to know some basic points of this video tutorial.

As you have seen on the video tutorial of Animated Hamburger Menu. At first, we have seen three horizontal lines when I click on them, two lines converted into a cross sign and one line moves to the left side and disappears, and also background color changed to red from white. Same as, when I clicked on it again it turns into a hamburger. To make its UI/UX I have used HTML and CSS and to toggle it, I have used some JavaScript code. You can also make it toggles by using HTML Input’s checkbox.

I hope, now you have got all the ideas to created a Hamburger Menu with Animation. If you are feeling difficulty creating this project, I have provided all the source code files below.

Animated Hamburger Menu [Source Code]

To take the source code of this Animated Hamburger Menu, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    height: 100vh;
    background-color: #e3f2fd;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 80px;
    width: 90px;
    border-radius: 6px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s linear;
    overflow: hidden;
}
.container.active{
    background-color: #de0611;
}
.container .menu{
    position: relative;
    height: 100%;
    width: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu .line{
    position: absolute;
    height: 8px;
    width: 100%;
    border-radius: 6px;
    background-color: #2c3e50;
    transition: all 0.4s linear;
}
.menu .line.one{
    top: 15px;
}
.container.active .line.one{
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    background-color: #fff;
}
.menu .line.three{
    bottom: 15px;
}
.menu .line.two{
    left: 0;
    opacity: 1;
}
.container.active .line.two{
    left: -100%;
    opacity: 0;
    background-color: #de0611;
}
.container.active .line.three{
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
    background-color: #fff;
}

All Hamburger Menu Animation in HTML CSS and JavaScript

CodingNepal — Sun, 11 Jul 2021 21:11:18 +0000

Hello friends. To we are going to learn to create all Hamburger Menu Animation in HTML CSS and JavaScript. Recently I have used this type of animation in my various Sidebar Designs. Now Let’s jump into our program[Hamburger Menu Animation].

Basically, the hamburger menu is used in the sidebar as a button to open or close the sidebar. At first, the hamburger icon is in three-line shapes, and when the user clicks the hamburger menu star to be animated.

Have a look at the given image of our design [Hamburger Menu Animation], The upper image is the rest condition of our hamburger, when the user clicks on every hamburger icon then it’s smoothly animated like on the second image.

If you are wondering to see the real demo of this Hamburger Menu and see the codes that I have used to create this design and animation, please watch the given video tutorial.

All Hamburger Menu Animation in HTML CSS

I have provided all the source code of this Hamburger Menu Animation below. Before jumping into the source code let’s talk about some important points ou this video tutorial of those Animated Hamburger menus.

At first, you have seen all the hamburger menus are in rest form, when I have clicked on every hamburgers icon then they start to animated into another icon. You can add any hamburger to your design. All the icons that I have used are brought from boxicons.com, you can also bring from the popular website fontawesome.com

I believe, now you can build this type of hamburger menu animation easily, if you are feeling difficulties to create then you can copy or download all the code that I have used to create this hamburger menu animation.

You Might Like This:

Following is the source code for our Animated Hamburger Menu, before copy-paste the following source code you have to create two files, one is the HTML file and another is the CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source code by clicking on the given download button.




  
    
      All Hamburger Menu Transformtion | CodingLab

/* Google Font Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins" , sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FF676D;
  padding: 0 20px;
}
.box{
  display: flex;
  align-items: center;
  background: #fff;
  /* box-shadow: 0 5px 10px rgba(0,0,0,0.2); */
  padding: 20px 15px;
  border-radius: 6px;
  /* transform: scale(1.5); */
}
.box .icon{
  position: relative;
  height: 65px;
  width: 65px;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 6px;
  cursor: pointer;
  margin: 0 8px;
  transition: all 0.3s ease;
}
.box .icon.active{
  background: #FF676D;
}
.box .icon.line.active{
  background: #FFF;
}
.icon i{
  position: absolute;
  font-size: 50px;
  left: 50%;
  top: 50%;
  color: #333;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: all 0.3s ease;
}
.icon.active i{
  color: #fff;
}
.icon.line.active i{
  color: #333;
}
 .icon i.close{
  opacity: 0;
}
 .icon.active i.close{
  opacity: 1;
  transform: translate(-50%, -50%) rotate(180deg);
}
 .icon.active i.open{
  opacity: 0;
  transform: translate(-50%, -50%) rotate(180deg);
}
 .icon.line.active i.close{
  transform: translate(-50%, -50%) rotate(0deg);
}
 .icon.line.active i.open{
  transform: translate(-50%, -50%) rotate(0deg);
}

If you face any difficulties while creating your All Hamburger Menu Animation or your code is not working as expected, you can download the source code files for this Hamburger Menu Click Animation for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Animated Hamburger Menu – CodingNepal

Animated Hamburger Menu in HTML CSS JavaScript

Animated Hamburger Menu in HTML CSS JavaScript

You Might Like This:

Animated Hamburger Menu [Source Code]

All Hamburger Menu Animation in HTML CSS and JavaScript

All Hamburger Menu Animation in HTML CSS

You Might Like This: