Posted on Oct 24, 2020 • Edited on Dec 22, 2020

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>

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