Scalable Animated Hamburger Menu 2021 🔥| HTML & CSS
Tags: css, codepen, beginners, webdev
Published: 2020-10-24 13:47:32

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](https://codepen.io/joyshaheb/pen/oNLvLWq)**


#**Codepen**
{% codepen https://codepen.io/joyshaheb/pen/oNLvLWq %}

#**Youtube Tutorial**
####**[If this post is difficult for you then see Step by step Tutorial on Youtube 🔥](https://www.youtube.com/watch?v=4v9epsQpFmQ&t=537s)**
{% youtube 4v9epsQpFmQ %}

## Table Of Contents 🔥
   * [HTML](#chapter-1)
   * [SCSS](#chapter-2)
   * [Conclusion](#chapter-3)



#**HTML** <a name="chapter-1"></a>

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

Write the code below -

```html
<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** <a name="chapter-2"></a>

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 -

```scss
*{
  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.

```scss
$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

```scss
@mixin flex($dir,$jus, $ai){
  display: flex;
  flex-direction:$dir;
  justify-content:$jus;
  align-items: $ai;
}
```

###**Step-4 :** styling rules for .lines class 

```scss
.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

```scss
#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

```scss
.menu{
  @include flex(row, null, null);
}
label{
  @include flex(row,null, null);
}
```
###**Step-7 :** Styling the .items class

```scss
.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

```scss
.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

```scss
#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**  <a name="chapter-3"></a>
We're done with the project. 🔥

####**[If this post is difficult for you then see Step by step Tutorial on Youtube 🔥](https://www.youtube.com/watch?v=4v9epsQpFmQ&t=537s)**


###**Suggestions & Criticisms are Highly Appreciated ❤️️**




   * **Youtube[ / Joy Shaheb](youtube.com/channel/UCHG7IJuST_BXJkne-0u0Xtw)**

   * **Twitter[ / JoyShaheb](https://twitter.com/JoyShaheb)**

   * **Instagram[ / JoyShaheb](https://www.instagram.com/joyshaheb/)**