DEV Community

Cover image for Scalable Animated Hamburger Menu 2021 🔥| HTML & CSS
Joy Shaheb
Joy Shaheb

Posted on • Edited on

14 4

Scalable Animated Hamburger Menu 2021 🔥| HTML & CSS

Have you ever encountered the situation where you created a beautiful Hamburger Navigation Menu icon but, you find it very difficult to scale it to various sizes? If yes, then continue reading...

Today we’ll build a Responsive & Scalable Animated Hamburger Navigation Menu. This tutorial only requires HTML & CSS knowledge.
You can find the full code on Codepen

Codepen

Youtube Tutorial

If this post is difficult for you then see Step by step Tutorial on Youtube 🔥

Table Of Contents 🔥

HTML

We will use the Logic of a checkbox(checked & unchecked state) to change the animation of our hamburger menu icon

Write the code below -

<div class="menu">
  <input type="checkbox" name="menu-active" id="menu-active">
  <div class="items first">
    <div class="i-1">Home</div>
    <div class="i-2">About</div>
  </div>
  <label for="menu-active">
    <div class="lines">
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div class="line-3"></div>
    </div>
  </label>
  <div class="items last">
    <div class="i-3">Services</div>
    <div class="i-4">Contact</div>
  </div>
</div>


Enter fullscreen mode Exit fullscreen mode

SCSS

Use scss instead of css, because it gives us much more functionalities than css.

Step-1 : Remove all the default styles of our browser & add our rules and logics in the * and body tag.

Code -

*{
  margin:0px;
  padding:0px;
  box-sizing:border-box;
  body{
    display: grid;
    place-items:center;
    width: 100%;
    height:100vh;
    background-color: black;
    color: #adb5bd;
    font-family: Sans-serif;
    input[type="checkbox"]{
      display: none;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Step-2 : Adding The main Sause of our project.

We'll call this block, our control panel. Change these values and the whole project changes accordingly.

$width:60px;  
$height:8px; 
$margin:10px; 
$font-size: 18px;
$animation-time: .6s;
Enter fullscreen mode Exit fullscreen mode

Step-3 : Template

create a @mixin to stop repeating the same code. Because time is more valuable than coffee XD

@mixin flex($dir,$jus, $ai){
  display: flex;
  flex-direction:$dir;
  justify-content:$jus;
  align-items: $ai;
}
Enter fullscreen mode Exit fullscreen mode

Step-4 : styling rules for .lines class

.lines{
  cursor:pointer;
  z-index:1;
  [class ^="line-"]{
    width: $width;
    height:$height;
    background-color: #fff;
    margin: $margin 0;
    transition:all $animation-time ease;
  }
}
Enter fullscreen mode Exit fullscreen mode

Step-5 : Changing the state of #menu-active id uisng the general sibling selector

#menu-active:checked ~ label{
  .line-1{
    transform: translatey($height+ $margin) rotate(45deg);
  }
  .line-2{
    transform:scale(0);
  }
  .line-3{
    transform: translatey(-($height+$margin)) rotate(-45deg);
      }
}
Enter fullscreen mode Exit fullscreen mode

Step-6 : using the mixins below

.menu{
  @include flex(row, null, null);
}
label{
  @include flex(row,null, null);
}
Enter fullscreen mode Exit fullscreen mode

Step-7 : Styling the .items class

.items{
  z-index:0;
  transition: all $animation-time ease;
  font-size: $font-size;
  font-weight:600;
  @include flex(row, center, center);
  [class ^="i-"]{
    margin: 0 $margin;
    cursor:pointer;
    transition: all .3s ease;
    &:hover{
      color:white;
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Step-8 : styling the .first & .last class

.first{
  transform: translatex(100px);
  opacity:0%;
  pointer-events:none; // removes the cursor: pointer

}
.last{
  transform:translatex(-100px);
  opacity:0%;
  pointer-events:none; // removes the cursor: pointer
}

Enter fullscreen mode Exit fullscreen mode

Step-9 : Style change of the .first & .last class with state change

#menu-active:checked{
  & ~ .first{
    transform: translatex(0px);
    opacity:100%;
    pointer-events:auto; // brings back the cursor: pointer
  }
  & ~ .last{
    transform: translatex(0px);
    opacity:100%;
    pointer-events:auto; // brings back the cursor: pointer
  }
}

Enter fullscreen mode Exit fullscreen mode

Conclusion

We're done with the project. 🔥

If this post is difficult for you then see Step by step Tutorial on Youtube 🔥

Suggestions & Criticisms are Highly Appreciated ❤️️

Top comments (5)

Collapse
 
ra1nbow1 profile image
Matvey Romanov

Awesome!

Collapse
 
olekrumian profile image
Oleksandr Rumiantsev

thanks for the detailed explanation

Collapse
 
joyshaheb profile image
Joy Shaheb

Most welcome ❤️

Collapse
 
clifton893 profile image
Clifton Long Jr.

Dang, that's dope!

Collapse
 
joyshaheb profile image
Joy Shaheb

Thank you soo much for the feedback ❤️❤️

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay