<header>
  <nav role="navigation" aria-label="Main">
    <button class="nav__toggle" aria-expanded="false" aria-controls="nav__list">Menu</button>
    
    <ul id="nav__list" class="nav__list" hidden>
      <li class="nav__list-item">
        <a href="#" class="nav__list-link">Link 1</a>
      </li>
      <li class="nav__list-item">
        <a href="#" class="nav__list-link">Link 2</a>
      </li>
      <li class="nav__list-item">
        <a href="#" class="nav__list-link">Link 3</a>
      </li>
      <li class="nav__list-item">
        <a href="#" class="nav__list-link">Link 4</a>
      </li>
    </ul>
  </nav>
</header>
[hidden] {
  display: none;
}

// Focus styles for keyboard users
:focus {
    outline: 2px solid red;
}

:focus:not(:focus-visible),
:focus:not(:-moz-focusring) {
    outline: 0;
}

:focus-visible,
:-moz-focusring {
    outline: 2px solid red;
}

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  min-height: 100vh;
  font-family: "Open Sans", Arial, Helvetica, sans-serif;
  background-color: #FFFFFF;
  padding: 1em;
}

.nav__toggle {
  font-size: 1.3rem;
  padding: 0.4em 1.3em;
  border: 0;
  cursor: pointer;
  background-color: hsl(169, 90%, 30%);
  color: #FFFFFF;
  font-weight: 700;
  transition: all 200ms ease-in-out;
  
  &:hover {
    background-color: hsl(169, 90%, 45%);
  }
}

.nav__list {
  font-size: 1em;
  background-color: hsl(169, 90%, 13%);
  padding: 0;
  max-width: 20ch;
  padding: 0;
  margin: 5px 0 0;
  
  .nav__list-item {
    list-style-type: none;
    
    .nav__list-link {
      display: block;
      color: #FFFFFF;
      text-decoration: none;
      padding: 0.5em 1em;
      background-color: hsl(169, 90%, 13%);
      
      &:hover {
        background-color: hsl(169, 90%, 30%);
        transition: all 200ms ease-in-out;
      }
    }
  }
}
View Compiled 
const navToggle = document.querySelector('.nav__toggle');
const navList = document.querySelector('.nav__list');
const navLinks = document.querySelectorAll('.nav__list-link');

navToggle.addEventListener('click', function () {
    if (navList.hasAttribute('hidden')) {
        this.setAttribute('aria-expanded', 'true');
        navList.removeAttribute('hidden');
      
        // Set focus on first link
        // will be highlighted for keyboard users
        navLinks[0].focus();
    } else {
        navList.setAttribute('hidden', 'true');
        this.setAttribute('aria-expanded', 'false');
    }
});

document.addEventListener('keydown', (event) => {
    // Ignore IME composition
    if (event.isComposing || event.keyCode === 229) {
        return;
    }
  
    // Close menu with ESC key
    if (event.keyCode === 27) {
        if (!navList.hasAttribute('hidden')) {
            navToggle.setAttribute('aria-expanded', 'false');
            navList.setAttribute('hidden', 'true');
        }
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.