How to Fix Hamburger Menu Animation

How to fix hamburger menu animation?

You have two Hamburger components in your app. One in App.js and one in Header.js.

Animated Hamburger toggle button not not working properly

I moved the transform-origin property to the basic css. When it was being applied later, it was somehow animating differently from others. Now it is working fine.

const button = document.querySelector('button');

button.addEventListener('click', () => {
    button.ariaExpanded = !JSON.parse(button.ariaExpanded);
});

.navbar-toggler.x:focus {
    outline: none;
    box-shadow: none;
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(1) {
    transform: rotate(45deg);
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(2) {
    opacity: 0;
    filter: alpha(opacity=0);
}
.navbar-toggler.x[aria-expanded='true'] .icon-bar:nth-of-type(3) {
    transform: rotate(-45deg);
}
.navbar-toggler.x .icon-bar {
    width: 22px;
    display: block;
    height: 2px;
    background-color: #fff;
        transition:all 0.2s;
}

.navbar-toggler.x .icon-bar + .icon-bar {
    margin-top: 4px;
}
.navbar-toggler.x .icon-bar:nth-of-type(1) {
    transform: rotate(0);
            transform-origin: 10% 10%;
}
.navbar-toggler.x .icon-bar:nth-of-type(2) {
    opacity: 1;
    filter: alpha(opacity=100);
}
.navbar-toggler.x .icon-bar:nth-of-type(3) {
    transform: rotate(0);
            transform-origin: 10% 90%;
}

<button class="navbar-toggler x" type="button" data-bs-toggle="mobile-menu" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

Side menu transform animations is not working properly when the hamburger menu is clicked

translateX(-100%) translates the element to the left by its own width.

To hide it initially therefore it needs to know where its initial left position is and then translate. No left setting has been given so it 'starts' from where it is.

We need to position it to the left so include a left: 0 styling.

.nav-text-links-content {
    position: absolute;
    display: flex;
    gap: 20px;
    flex-direction: column;
    width: 100%;
    height: 85vh;
    top: 5rem;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    /* left: -100%; */
    left: 0; /* ADDED */
    opacity: 0;
    transition: transform 300ms linear;
  }

Just as an aside, although using translate can indeed be 'more efficient' in this instance efficiency may not matter so much as this is not a continuous animation but happens only when the user clicks the icon which is unlikely to be continuous but occasional.

Bootstrap 5 Hamburger Animation not working

just add JQuery libs to let the script work,

EDITED: added event to close menu after clicking outside.

here is an example;

$(document).ready(function() {
    $('.navbar-toggler-button').on('click', function() {
      $('.animated-hamburger').toggleClass('open');
    });
    
    $(document).click(function(event) {
      var tover = $(event.target);
    if ($('.animated-hamburger').hasClass('open') && !tover.hasClass('animated-hamburger')) {
    $('.animated-hamburger').toggleClass('open');
    }
    });

});

.animated-hamburger {
    width: 30px !important;
    height: 20px !important;
    position: relative !important;
    margin: 0px !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .5s ease-in-out !important;
    -moz-transition: .5s ease-in-out !important;
    -o-transition: .5s ease-in-out !important;
    transition: .5s ease-in-out !important;
    cursor: pointer !important;
}
    
.animated-hamburger span {
    display: block !important;
    position: absolute !important;
    height: 3px !important;
    width: 100% !important;
    border-radius: 9px !important;
    opacity: 1 !important;
    left: 0 !important;
    -webkit-transform: rotate(0deg) !important;
    -moz-transform: rotate(0deg) !important;
    -o-transform: rotate(0deg) !important;
    transform: rotate(0deg) !important;
    -webkit-transition: .25s ease-in-out !important;
    -moz-transition: .25s ease-in-out !important;
    -o-transition: .25s ease-in-out !important;
    transition: .25s ease-in-out !important;
}
    
.animated-hamburger span {
    background: #f3e5f5 !important;
}
    
.animated-hamburger span:nth-child(1) {
    top: 0px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(2) {
    top: 10px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger span:nth-child(3) {
    top: 20px !important;
    -webkit-transform-origin: left center !important;
    -moz-transform-origin: left center !important;
    -o-transform-origin: left center !important;
    transform-origin: left center !important;
}
    
.animated-hamburger.open span:nth-child(1) {
    -webkit-transform: rotate(45deg) !important;
    -moz-transform: rotate(45deg) !important;
    -o-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
    top: 0px !important;
    left: 8px !important;
}
    
.animated-hamburger.open span:nth-child(2) {
    width: 0% !important;
    opacity: 0 !important;
}
    
.animated-hamburger.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg) !important;
    -moz-transform: rotate(-45deg) !important;
    -o-transform: rotate(-45deg) !important;
    transform: rotate(-45deg) !important;
    top: 21px !important;
    left: 8px !important;
}

<!-- JUST ADD THIS LINE -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ENDS HERE -->

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

<nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark">
<div class="container-fluid container-fluid-mobile">
<jdoc:include type="modules" name="logo"/>
    
<button class="navbar-toggler navbar-toggler-button" type="button" data-bs-toggle="collapse" data-bs-target="#navigation"aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-hamburger"><span></span><span></span><span></span></div>
</button>

<div class="collapse navbar-collapse" id="navigation">

<ul class="navbar-nav ms-auto mb-2 mb-lg-0 navbar-right nav-item">
<jdoc:include type="modules" name="navigation" onclick="toggleMenu() />
</ul>
<div class="collapse-show-bottom"></div>

</div>
</div>
</nav>

Rounded animation Hamburger menu not opening menu items

Here is an all CSS solution. Instead of using an event, I used a checkbox with a label that acts as the button.

HTML

<div class="nav">
    <input type="checkbox" class="nav__checkbox" id="nav-toggle">
    <label for="nav-toggle" class="nav__button">
      <span class="nav__icon"></span>
    </label>

    <div class="nav__background"></div>

    <nav class="nav__menu">
        <ul class="nav__list">
            <li class="nav__item">Item1</li>
            <li class="nav__item">Item2</li>
            <li class="nav__item">Item3</li>
            <li class="nav__item">Item4</li>
        </ul>
    </nav>
</div>

CSS

.nav__checkbox{
  display: none;
}

.nav__button{
  background-color: #fff;
  position: fixed;
  height: 4.375rem;
  width: 4.375rem;
  border-radius: 50%;
  top: 2.5rem;
  right: 2.5rem;
  z-index: 20;
  cursor: pointer;
}

.nav__background{
  background-image: linear-gradient(#000, #000);
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 50%;
  position: fixed;
  top: 2.8125rem;
  right: 2.8125rem;
  z-index: 10;
  transition: transform .6s ease;
}

.nav__menu{
  height: 100vh;
  position: fixed;
  color:#00f;
  top: 0;
  left: 0;
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  width: 0;
  transition: all .6s ease;
}

.nav__checkbox:checked ~ .nav__menu{
  opacity: 1;
  visibility: visible;
  width: 100%;
}

.nav__checkbox:checked ~ .nav__background{
  transform: scale(20);
}

body{
  background-color: #eee;
}

Here is the link

https://jsfiddle.net/1wcpz3ua/8/

Animation for hamburger icon animation not working

Use the CSS display: inline-block or display: block so the element will have a width and height.

.hamburger {
  position: relative;
  font-size: 40px !important;
  padding: 0px !important;
  padding-left: 30px !important;
  text-align: left !important;
  color: #000;
  text-decoration: none;
  display: inline-block;
  transition: 0.75 ease-in-out !important;
}

.hamburger:hover {
  transform: scale(1.1) rotate(90deg) !important;
}

<div class="wrapper">
  <div class="header">
    <a class="hamburger" href="#" onclick="dropdown()"> ≡ </a>
  </div>

Hamburger Overlay menu animation

Check this, i have fixed your issue..

   function openNav() {        document.getElementById("myNav").style.left = "0";        setTimeout(function(){            document.getElementById("overlay-content").style.display = "flex";            // document.getElementById("menu-anim-fix").style.display = "flex";        }, 100);    }
    function closeNav() {        document.getElementById("myNav").style.left = "-100%";        document.getElementById("overlay-content").style.display = "none";    }

header a {  letter-spacing: 8px;  text-transform: uppercase;  color: #fff;  -webkit-transition: all 0.3s ease;    -moz-transition: all 0.3s ease;    -ms-transition: all 0.3s ease;    -o-transition: all 0.3s ease;    transition: all 0.3s ease;    text-decoration:none !important;}header a:hover {  color: #d3a356;    letter-spacing: 10px;    }
.overlay45 {  height: 100%;  width: 100%;  position: fixed;  z-index: 49;  top: 0;  left: -100%;  background-color: rgb(0,0,0);  background-color: rgba(0,0,0, 0.9);  overflow-x: hidden;  transition: 1s;

}
.overlay-content{  transition: 1s;}
.overlay45 a {display: block;  transition: 0.3s;}
/*.overlay-content {  position: relative;  width: 100%;}*/

.overlay45 .closebtn {  position: absolute;  top: -10px;  right: 65px;  font-size: 60px;  z-index: 50;}
@media screen and (max-height: 450px) {  .overlay45 a {font-size: 20px}  .overlay45 .closebtn {  font-size: 40px;  top: 15px;  right: 35px;  }}@media screen and (max-width: 600px) {  .overlay45 .closebtn {  position: absolute;  top: -10px;  right: 20px;  font-size: 60px;  z-index: 50;}}
@media screen and (max-width: 767px) {  header .col-sm-12 {    text-align: center !important;  }  header .col-md-2 {    border-right: none !important;    border-left: none !important;  }  }

.refrences-website-fix{  padding-top: 10%;}
.refrences-website-fix a{  font-size: 35px;  font-weight: 900;}

.refrences-website-fix .corvin:hover{    background-image: url(../img/logo.jpg);    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;}
.header-top {    padding: 0 10px !important;
}.header-top img{  width: 50px;  height: 50px;}
@media screen and (max-width: 760px) {.header-top img{  width: 80px;  height: 80px;}  }

.header-top {    padding: 0 60px;  position: fixed;  top: 0;  width: 100%;  z-index: 16;  -webkit-box-sizing: border-box;          box-sizing: border-box;}.header-top a{  /*color: grey !important;*/
}.header-top i{  background: #fff !important;}h1 {  line-height: 70px;  height: 70px;}
h1 a {  display: block;  padding: 0 10px;}
.toggle-menu {  width: 50px;  height: 50px;  display: inline-block;  position: relative;  top: 20px;}
.toggle-menu i {  position: absolute;  display: block;  height: 2px;  background: white;  width: 24px;  left: 10px;  -webkit-transition: all .3s;  -o-transition: all .3s;  transition: all .3s;}
.toggle-menu i:nth-child(1) {  top: 16px;}
.toggle-menu i:nth-child(2) {  top: 24px;}
.toggle-menu i:nth-child(3) {  top: 32px;}
/*.open-menu i:nth-child(1) {  top: 25px;  -webkit-transform: rotateZ(45deg);          -ms-transform: rotate(45deg);      transform: rotateZ(45deg);}
.open-menu i:nth-child(2) {  background: transparent !important;}
.open-menu i:nth-child(3) {  top: 25px;  -webkit-transform: rotateZ(-45deg);          -ms-transform: rotate(-45deg);      transform: rotateZ(-45deg);}*/
nav {  height: 0;      -webkit-box-sizing: border-box;            box-sizing: border-box;  background:#000;  position: fixed;  width: 100%;   /* -webkit-transition: all 1s;    -o-transition: all 1s;    transition: all 1s;*/ visibility: hidden;  opacity: 0;  -webkit-transition: opacity 1s, visibility 0s 1s;  transition: opacity 1s, visibility 0s 1s;  z-index: 15;}
.clearfix:before,.clearfix:after {  content: "";  display: table;}
.clearfix:after {  clear: both;}
.l-left {  float: left;}
.l-right {  float: right;}
.ref-menu-fix{  text-align: center;  margin: 0 auto;  width: 50%;  font-size: 24px;  letter-spacing: 8px;  color: #fff !important;  margin-top:20px;  text-transform: uppercase;}
.toggle-menu {  width: 50px;  height: 50px;
  display: inline-block;  position: relative;  top: 20px;}
.toggle-menu i {  position: absolute;  display: block;  height: 2px;  background: white;  width: 24px;  left: 10px;  -webkit-transition: all .3s;  -o-transition: all .3s;  transition: all .3s;}
.toggle-menu i:nth-child(1) {  top: 16px;}
.toggle-menu i:nth-child(2) {  top: 24px;}
.toggle-menu i:nth-child(3) {  top: 32px;}

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"></head><body style="background-color: #000;"> <header>  <div class="header-top clearfix">    <h1 class="l-left link"><a href="index.html" style="font-size: 16px;"><img style="" src="assets/img/logo.jpg" height="100" width="100" alt="Sample Image"></a></h1>    <a href="refrences.html" class="ref-menu-fix" style="">REFERENCES</a>    <a class="l-right link toggle-menu" style="cursor:pointer;" onclick="openNav()" style="filter: brightness(1);" href="#">      <i ></i>      <i ></i>      <i ></i>    </a>    <!-- <span class="l-right link toggle-menu" style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span> -->  </div>              <div id="myNav" class="overlay45">          <header style="background-color: #1f1f1f; height: 100%;">            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>            <div class="row overlay-content" id="overlay-content" style="height: 100%; position: fixed;display: none;width: 100%;">              <div class="col-md-2" style="border-right: 1px solid #fff" ></div>              <div class="col-md-8">                <div class="row mt-5">                  <div class="col-md-12" style="text-align: center;">                    <img src="assets/img/logo2.png" style="width: 20%; margin: 1 auto;" alt="Sample Image">                  </div>                </div>                <div class="row mb-5">                  <div class="col-sm-12 col-md-2"></div>                  <div class="col-sm-12 col-md-4">                    <a id="menu-anim-fix" href="index.html">Home Page</a>                  </div>                  <div class="col-sm-12 col-md-4" style="text-align: right;">                    <a id="menu-anim-fix" href="ouroffer.html">Our Offer</a>                  </div>                  <div class="col-sm-12 col-md-2"></div>                </div>                <div class="row mb-5">                  <div class="col-sm-12 col-md-2"></div>                  <div class="col-sm-12 col-md-4">                    <a id="menu-anim-fix" href="ourwork.html">Our Work</a>                  </div>                  <div class="col-sm-12 col-md-4" style="text-align: right;">                    <a id="menu-anim-fix" href="stepform.html">Order Us</a>                  </div>                  <div class="col-sm-12 col-md-2"></div>                </div>                <div class="row mb-5">                  <div class="col-sm-12 col-md-2"></div>                  <div class="col-sm-12 col-md-4">                    <a id="menu-anim-fix" href="website-art.html">Website Art</a>                  </div>                  <div class="col-sm-12 col-md-4" style="text-align: right;">                    <a href="contact.html">Contact Us</a>                  </div>                  <div class="col-sm-12 col-md-2"></div>                </div>                <div class="row">                  <div class="col-sm-12 col-md-12" style="text-align: center;">                    <a id="menu-anim-fix" href="refrences.html">REFERENCES</a>                  </div>                </div>                <div class="row mt-5">                  <div class="col-md-12 mt-5" style="text-align: center;">                    <p class="mt-5" style="color: #fff;font-size: 12px;">2019- All Rights Reserved</p>                  </div>                </div>                        </div>              <div class="col-md-2" style="border-left: 1px solid #fff" ></div>            </div>          </header>        </div>     </header>
</body></html>

Hamburger icon css animation into an x

You can use tranform: rotate() on the top and bottom with a transition on the width for the middle span.

let navToggle = document.querySelector('.nav-toggle')
let bars = document.querySelectorAll('.bar')

function toggleHamburger(e) {
  bars.forEach(bar => bar.classList.toggle('x'))
}

navToggle.addEventListener('click', toggleHamburger)

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 22px;
  width: 22px;
}

.nav-toggle .bar {
  height: 3px;
  width: 100%;
  background-color: black;
  transition: all 100ms ease-in-out;
}

.nav-toggle:hover {
  cursor: pointer;
}

.x:nth-of-type(1) {
  transition: all 100ms ease-in-out;
  transform: rotate(45deg);
  transform-origin: top left;
  width: 28px;
}

.x:nth-of-type(2) {
  transition: all 100ms ease-in-out;
  transform-origin: center;
  width: 0;
}

.x:nth-of-type(3) {
  transition: all 100ms ease-in-out;
  transform: rotate(-45deg);
  transform-origin: bottom left;
  width: 28px;
}

<a class="nav-toggle">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</a>

---

Related Topics