Scalable Animated Hamburger Menu 2021 🔥| HTML & CSS

#css #codepen #beginners #webdev

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 🔥

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>

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;
    }
  }
}

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;

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;
}

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;
  }
}

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);
      }
}

Step-6 : using the mixins below

.menu{
  @include flex(row, null, null);
}
label{
  @include flex(row,null, null);
}

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;
    }
  }
}

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
}

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
  }
}

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 ❤️️

Youtube / Joy Shaheb
Twitter / JoyShaheb
Instagram / JoyShaheb

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More