Creating A Pure CSS Off-canvas Menu Using Flexbox

Preview:

Description:

A mobile app-style vertical sidebar off-canvas navigation system created by zomigi that is made only with CSS & CSS3. It uses flexbox to control the layout so that when the menu becomes visible, the content area can resize to fit the remaining width in the viewport, instead of overflowing the viewport and getting cut off on the right side, as happens with most off-canvas menus.

Basic Usage:

Create a hamburger icon for the menu toggle button using checkbox input.

<input id="hamburger" type='checkbox' class="hamburger-checkbox">
<label for="hamburger" class="hamburger-label" role="button" aria-labelledby="menu">&#xf0c9;</label>

The CSS to style the toggle button.

.hamburger-checkbox {
  position: absolute;
  opacity: 0;
}
.hamburger-label {
  position: absolute;
  top: 32px;
  left: 32px;
  z-index: 1;
  display: block;
  width: 42px;
  height: 42px;
  font: 42px/42px fontawesome;
  text-align: center;
  color: #444;
  cursor: pointer;
}
.hamburger-checkbox:checked ~ .hamburger-label:before {
  content: '\f00d';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 42px;
  height: 42px;
  font: 42px/42px fontawesome;
  text-align: center;
  color: #eee;
}
.hamburger-checkbox:checked ~ .sidebar {
  width: auto;
  height: auto;
  padding-top: 6.5em;
}

Create the off-canvas menu using unordered list

<nav class="sidebar">
  <ul class="menu">
    <li>Home</li>
    <li>Contact</li>
    <li>About</li>
    <li>Blog</li>
  </ul>
</nav>

The CSS/CSS3 rules to active the off-canvas menu.

.sidebar {
  overflow: hidden;
  width: 0;
  height: 0;
  background: #444;
  color: #eee;
  transition: all .3s;
}
.menu { list-style: none; }
.menu li {
  padding: 16px 32px;
  border-top: 1px solid #2b2b2b;
}
.menu li:last-child { border-bottom: 1px solid #2b2b2b; }