How can I add animation to my burger menu?

Question

While clicking myLinks heading should come from left side and push the page with having a transition of 3 seconds. I have tried so many methods still I'm getting wrong.

If anyone could help me it will be welcome.

function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
  align-items: center;
}

.topnav #myLinks {
  display: none;
}

.topnav a {
  color: black;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
  align-content: center;
  background: #ddd;
}

.topnav a.icon {
  background: white;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.topnav a:hover {
  background-color: white;
  color: black;
}

.active {
  background-color: white;
  color: black;
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}

.topnav-buttons {
  display: flex;
  gap: 10px;
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
}

* {
  margin: 0;
}

<div class="topnav">
  <a class="active">INVOICE</a>
  <div class="topnav-buttons">
    <button onclick="location.href='invoiceAdd.html'">Add Invoice</button>
  </div>
  <div id="myLinks">
    <a href="transactions.html">Transaction</a>
    <a href="product.html">Product</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>

check it that may be its helpfu. [CSS 3 slide-in from left transition](https://stackoverflow.com/questions/16989585/css-3-slide-in-from-left-transition) — M Junaid, Jul 26 '23 at 11:13

Arischvaran · Accepted Answer · 2023-07-27T06:04:01.263

Transitions cannot be used for the display property so instead you should use opacity. Also, developers usually do not mix CSS code into JS file and vice versa. Instead, you should use the classList.toggle property in javascript to switch between states in the classes.

.topnav .my-links {
    opacity: 0;
    display: none;
    transition: opacity 200ms ease;
}

.topnav .my-links.show {
    opacity: 1;
    display: block;
}

How can I add animation to my burger menu?

1 Answers1