<header class="HeaderBar HeaderBar--dark">
  <button class="HeaderBar-toggle" aria-expanded="true" aria-controls="drawer">
    Menu
  </button>
</header>

<nav id="drawer" class="Drawer">
  <div class="Drawer-content">
    <header class="HeaderBar">
      Example
    </header>
    <ul class="Drawer-list">
      <li>
        <a class="Drawer-item" href="#" aria-current="page">
          Here
        </a>
      </li>
      <li>
        <a class="Drawer-item" href="#">
          There
        </a>
      </li>
      <li>
        <a class="Drawer-item" href="#">
          Everywhere
        </a>
      </li>
    </ul>
    <ul class="Drawer-list">
      <li>
        <a class="Drawer-item" href="#">
          Somewhere Else Entirely
        </a>
      </li>
    </ul>
  </div>
</nav>
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  color: #111;
  font: 1em/1.5625 Source Sans Pro, Tahoma, Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 0;
}

.HeaderBar {
  align-items: center;
  background: #DBE5EA;
  display: flex;
  height: 2.75em;
  line-height: 1;
  padding: 0 1.5em;
}

.HeaderBar--dark {
  background: #456BD9;
  color: #fff;
}

.HeaderBar-toggle {
  align-self: stretch;
  appearance: none;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  margin: 0;
  margin-left: auto;
  margin-right: -1.5em;
  padding: 0 1.5em;
}

.Drawer {
  background: rgba(219, 229, 234, 0.8);
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity 0.2s ease;
}

.Drawer[hidden] {
  display: none !important;
}

.Drawer.is-sliding {
  opacity: 0;
}

.Drawer-content {
  background: #fff;
  box-shadow: 0 0 4em rgba(0, 0, 0, 0.15);
  margin-left: auto;
  max-width: 20em;
  min-height: 100%;
  transition: transform 0.2s ease;
  width: 80%;
}

.Drawer.is-sliding .Drawer-content {
  transform: translateX(100%);
}

.Drawer-list {
  list-style: none;
  padding: 0.75em;
}

.Drawer-list + .Drawer-list {
  border-top: 1px solid #DBE5EA;
}

.Drawer-item {
  border-radius: 0.25em;
  color: inherit;
  display: block;
  line-height: 1;
  padding: 0.75em;
  text-decoration: none;
}

.Drawer-item[aria-current="page"] {
  background: #456BD9;
  color: #fff;
  border-color: transparent;
  z-index: 1;
}
const drawer = document.getElementById('drawer');
const toggle = document.querySelector('[aria-controls="drawer"]');

function open() {
  toggle.setAttribute('aria-expanded', true);
  drawer.classList.add('is-sliding');
  drawer.hidden = false;
  drawer.getClientRects(); // Force re-paint so transition occurs
  drawer.classList.remove('is-sliding');
}

function close() {
  toggle.setAttribute('aria-expanded', false);
  
  const afterClose = event => {
    if (event.target === drawer) {
      drawer.removeEventListener('transitionend', afterClose);
      drawer.hidden = true;
      drawer.classList.remove('is-sliding');
    }
  };
  
  drawer.addEventListener('transitionend', afterClose);
  drawer.classList.add('is-sliding');
}

toggle.addEventListener('click', () => {
  const expanded = toggle.getAttribute('aria-expanded') === 'true';
  
  if (expanded) {
    close();
  } else {
    open();
  }
});

drawer.addEventListener('click', event => {
  if (event.target === drawer) {
    close();
  }
});
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.