CSS3 Only Off-canvas Navigation with Animated Toggle Icon

Preview:

Description:

A trendy CSS3 based off-canvas navigation with an animated toggle icon that allows to slide out a sidebar navigation panel from the left side of the browser window. No Javascript needed.

How to use it:

Create the Html for a menu icon to toggle the off-canvas navigation.

<input id="menu" type="checkbox" name="menu" class="HiddenCheckbox"/>
<label for="menu" class="MenuIcon"></label>

Animated the menu icon using CSS3 transitions and transforms.

.HiddenCheckbox { display: none; }
.MenuIcon {
  cursor: pointer;
  display: block;
  float: left;
  height: 30px;
  position: relative;
  width: 30px;
  z-index: 2;
}
.MenuIcon::before {
  -webkit-box-shadow: #999999 0 12px 0;
  box-shadow: #999999 0 12px 0;
  height: 6px;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  width: 30px;
}
.MenuIcon::after {
  bottom: 0;
  height: 6px;
  -webkit-transform-origin: left bottom;
  -ms-transform-origin: left bottom;
  transform-origin: left bottom;
  width: 30px;
}
.MenuIcon::before,
.MenuIcon::after {
  background: #999999;
  display: block;
  content: '';
  position: absolute;
  -webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.4s 0.2s;
  transition: box-shadow 0.2s linear, transform 0.4s 0.2s;
}
.HiddenCheckbox:checked ~ .MenuHeader {
  opacity: 1;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}
.HiddenCheckbox:checked ~ .MenuIcon::before {
  -webkit-box-shadow: transparent 0 0 0;
  box-shadow: transparent 0 0 0;
  -webkit-transform: rotate(45deg) translate3d(6px, -3px, 0);
  transform: rotate(45deg) translate3d(6px, -3px, 0);
}
.HiddenCheckbox:checked ~ .MenuIcon::after {
  -webkit-transform: rotate(-45deg) translate3d(6px, 3px, 0);
  transform: rotate(-45deg) translate3d(6px, 3px, 0);
}
.HiddenCheckbox:checked ~ .Menu { left: 0; }

Create the Html for an off-canvas navigation and then wrap it together with the menu icon into a parent element with class of ‘MenuContainer’ .

<div class="MenuContainer">
  <input id="menu" type="checkbox" name="menu" class="HiddenCheckbox"/>
  <label for="menu" class="MenuIcon"></label>
  <h2 class="MenuHeader">Nav Menu</h2>
  <nav class="Menu">
    <ul class="Menu-list">
      <li class="Menu-item"><a href="https://cssscript.com" target="_blank" class="Menu-link">Home</a></li>
      <li class="Menu-item"><a href="https://cssscript.com/us/" target="_blank" class="Menu-link">About</a></li>
      <li class="Menu-item"><a href="https://cssscript.com/contact-us/" target="_blank" class="Menu-link">Contact</a></li>
    </ul>
  </nav>
</div>

The required CSS to style the off-canvas navigation.

.MenuContainer {
  display: inline-block;
  margin: 20px;
}
.Menu {
  background: #333;
  bottom: 0;
  left: -90%;
  position: absolute;
  top: 0;
  width: 90%;
  -webkit-transition: left 0.4s;
  transition: left 0.4s;
}
.Menu-list {
  list-style-type: none;
  margin: 60px 0 0;
  padding: 0;
}
.Menu-item { margin: 0; }
.Menu-link {
  color: #fff;
  display: block;
  overflow: hidden;
  padding: 8px 22px;
  position: relative;
  text-decoration: none;
  z-index: 1;
}
.Menu-link::before {
  background: #444;
  bottom: 0;
  content: '';
  left: 0;
  position: absolute;
  right: 100%;
  top: 0;
  -webkit-transition: right 0.4s;
  transition: right 0.4s;
  z-index: -1;
}
.Menu-link::after {
  content: attr(href);
  color: #fff;
  float: right;
  opacity: 0;
  -webkit-transition: opacity 0.8s, -webkit-transform 0.4s;
  transition: opacity 0.8s, transform 0.4s;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
}
.Menu-link:hover::before { right: 0; }
.Menu-link:hover::after {
  opacity: 0.5;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}