Home/ Questions/Q 7485

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 60k
Asked: 2024-11-28T04:16:10+00:00

Creating a Hamburger Menu

  • 60k

The hamburger icon is simply a symbol that has come to mean “menu”. It's used to toggle a menu or navigation bar between being collapsed behind the button or displayed on the screen.
gif

Here is how to create it-

1. HTML File

We start by creating our HTML file and initializing two classes to target our elements. 

<body>   <div class="menu-btn">     <div class="menu-btn__burger"></div>   </div> </body>
Enter fullscreen mode Exit fullscreen mode

2. CSS File

Here we start creating and designing our hamburger icon. We start with basic properties such as defining the width, height and the transition. This creates the basic outline of the box. 

.menu-btn {   position: relative;   display: flex;   justify-content: center;   align-items: center;   width: 80px;   height: 80px;   cursor: pointer;   transition: all .5s ease-in-out;   border: 3px solid #fff;  }
Enter fullscreen mode Exit fullscreen mode

pic
To get the middle line (out of the three) of our icon we define width, height and border radius as follows- 

.menu-btn__burger {   width: 50px;   height: 6px;   background: #fff;   border-radius: 5px;   box-shadow: 0 2px 5px rgba(255,101,47,.2);   transition: all .5s ease-in-out; }
Enter fullscreen mode Exit fullscreen mode

pic

To get the other two top and bottom lines- 

.menu-btn__burger::before, .menu-btn__burger::after {   content: '';   position: absolute;   width: 50px;   height: 6px;   background: #fff;   border-radius: 5px;   box-shadow: 0 2px 5px rgba(255,101,47,.2);   transition: all .5s ease-in-out; } .menu-btn__burger::before {   transform: translateY(-16px); } .menu-btn__burger::after {   transform: translateY(16px); }
Enter fullscreen mode Exit fullscreen mode

pic

3. JS File

Here we work with the animation of the hamburger icon. We target the “menu-btn” class and initialize a variable “menuopen” to be false. We add an eventListener “click” which either adds or removes the class “open”. 

const menuBtn = document.querySelector('.menu-btn'); let menuOpen = false; menuBtn.addEventListener('click', () => {   if(!menuOpen) {     menuBtn.classList.add('open');     menuOpen = true;   } else {     menuBtn.classList.remove('open');     menuOpen = false;   } });
Enter fullscreen mode Exit fullscreen mode

4. Final Touch

At last, we need to retouch our CSS for the final animation. Here our middle line moves to the left and other two rotate to 45 deg on click. 

.menu-btn.open .menu-btn__burger {   transform: translateX(-50px);   background: transparent;   box-shadow: none; } .menu-btn.open .menu-btn__burger::before {   transform: rotate(45deg) translate(35px, -35px); } .menu-btn.open .menu-btn__burger::after {   transform: rotate(-45deg) translate(35px, 35px); }
Enter fullscreen mode Exit fullscreen mode

Here is the final preview-

Hope it helps!!!

beginnerscodenewbietutorialwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,