<main id="wrapper">
  <aside aria-hidden="true" id="asideMenu">
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </aside>

  <section id="content">
    <header>
      <nav id="mainMenu">
        <button id="toggleAsideMenuButton" type="button">
          Toggle aside menu
        </button>
        <a aria-hidden="true" class="focus-only" href="#asideMenu">
          Skip to aside menu
        </a>
        <button id="sayHiButton" type="button">Say hi</button>
      </nav>
    </header>
  </section>
</main>
[aria-hidden="true"] {
  display: none;
}

.focus-only {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.focus-only:focus,
.focus-only:focus-within {
  opacity: initial;
  position: initial;
  pointer-events: initial;
}

#main-wrapper {
  display: flex;
  height: 100vh;
}

#content {
  flex-grow: 1;
}

#mainMenu {
  background-color: lightblue;
  padding: 1em;
}

#asideMenu {
  background-color: antiquewhite;
  padding: 0 2em 0 0;
}

document
  .getElementById("toggleAsideMenuButton")
  .addEventListener("click", (event) => {
    const asideMenu = document.getElementById("asideMenu");
    const asideMenuLink = event.target.nextElementSibling;

    if (asideMenu.hasAttribute("aria-hidden")) {
      asideMenu.removeAttribute("aria-hidden");
      asideMenuLink.removeAttribute("aria-hidden");
    } else {
      asideMenu.setAttribute("aria-hidden", "true");
      asideMenuLink.setAttribute("aria-hidden", "true");
    }
  });

document.getElementById("sayHiButton").addEventListener("click", () => {
  alert("Hi!");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.