<nav class="main-navigation" role="navigation" aria-label="Primary navigation">

  <!-- the bad: not focusable and no accessible name -->
  <div class="nav-toggle">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <svg class="nav-toggle" width="32" height="28" viewBox="0 0 32 28">
    <rect y="0" width="32" height="4" rx="2" ry="2" />
    <rect y="24" width="32" height="4" rx="2" ry="2" />
    <rect y="12" width="32" height="4" rx="2" ry="2" />
  </svg>

  <!-- the good: use <button> to create a button ! + visually hidden accessible name -->
  <button class="nav-toggle" aria-controls="header-menu" aria-expanded="false">
    <span class="sr-only open-text">Afficher le menu</span>
    <span class="sr-only close-text">Masquer le menu</span>
    <span class="plant-based-patty" aria-hidden="true"></span>
  </button>

  <div class="header-menu" id="header-menu">
    <ul class="nav">
      <li><a href="#">Homepage</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>

</nav>
* {
  box-sizing: border-box;
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial;
  font-size: 100%;
  padding: 3rem;
}

/* Accessible hiding with a nice .sr-only class
 * https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html#hiding-content-visually
*/
.sr-only:not(:focus):not(:active) {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/**
 * Main navigation
 */

.main-navigation {
  background: #28223b;
  border-radius: 0.5rem;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 1.5rem 2rem;
}

.main-navigation .header-menu {
  flex-basis: 100%;
}

.main-navigation .nav {
  margin-top: 1rem;
}

/**
 * Burger button
 */

.nav-toggle {
  background: #483f65;
  border-radius: 0.5rem;
  display: inline-block;
  height: 3.25rem;
  margin: 0 1rem 0 0;
  padding: 0.75rem;
  vertical-align: top;
  width: 3.5rem;
}
.nav-toggle:hover,
.nav-toggle:active,
.nav-toggle:focus {
  background: #5c527d;
}
.nav-toggle:focus-visible {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* div button */

div.nav-toggle span {
  background: white;
  display: block;
  border-radius: 0.1875rem;
  height: 0.25rem;
}
div.nav-toggle span:nth-child(2) {
  margin: 0.5rem 0;
}

/* SVG button */

svg.nav-toggle {
  fill: white;
}

/* real button */

button.nav-toggle {
  border: 0;
}

button.nav-toggle .plant-based-patty {
  background: white;
  display: block;
  border-radius: 0.1875rem;
  height: 0.25rem;
  margin: 0.75rem 0;
  position: relative;
  width: 100%;
}

button.nav-toggle .plant-based-patty:before,
button.nav-toggle .plant-based-patty:after {
  content: "";
  background: white;
  border-radius: 0.1875rem;
  height: inherit;
  position: absolute;
  left: 0;
  width: 100%;
}

button.nav-toggle .plant-based-patty:before {
  top: -0.75rem;
}

button.nav-toggle .plant-based-patty:after {
  bottom: -0.75rem;
}

/* display 'close' or 'open' text depending on the state of the nav */

button.nav-toggle .close-text {
  display: none;
}

.nav-open button.nav-toggle .close-text {
  display: block;
}
.nav-open button.nav-toggle .open-text {
  display: none;
}

/**
 * Nav
 */

.header-menu {
  display: none;
}

.nav-open .header-menu {
  display: flex;
}

ul.nav {
  list-style: none;
  display: flex;
}

ul.nav li {
  font-size: 1.125rem;
}

ul.nav li > li {
  margin-right: 1em;
  position: relative;
  padding: 0.5em 0;
}

ul.nav li a {
  color: #fff;
  padding: 0.25em;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: text-decoration-color 0.2s ease-in-out;
}

ul.nav li a:hover,
ul.nav li a:active {
  text-decoration-color: currentColor;
}

ul.nav li a:focus {
  outline: 2px solid currentColor;
}
$(".nav-toggle").click(function () {
  $(".main-navigation").toggleClass("nav-open");
});

$("button.nav-toggle").click(function () {
  $(this).attr(
    "aria-expanded",
    $(this).attr("aria-expanded") == "false" ? "true" : "false"
  );
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js