Pure CSS Responsive Slide In Navigation

Preview:

Description:

A pure CSS responsive navigation system that transforms the regular menu list into an off-canvas slide-in menu on mobile devices.

How to use it:

Create a responsive header navigation for your webpage.

<header class="left_menu">
  <input type="checkbox" id="main_menu" name="main_menu" />
  <span class="logo">Logo</span>
  <label for="main_menu">
  <div class="hamburger hamburger--elastic" type="button" aria-label="Menu" aria-controls="main_menu"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </div>
  </label>
  <nav>
    <ul>
      <li>
        <h1 class="logo">Logo</h1>
      </li>
      <li> <a href="">Home</a> </li>
      <li> <a href="">Contact</a> </li>
      <li> <a href="">About</a> </li>
      <li> <a href="">Blog</a> </li>
    </ul>
  </nav>
</header>

The primary CSS styles for the navigation & hamburger toggle button.

nav li, nav ul { margin: 0 }
nav { box-shadow: 0 0 10px rgba(0,0,0,.5) }
nav ul {
  height: 100%;
  padding: 0;
  list-style: none;
  overflow: hidden
}
nav li:nth-child(1) a {
  -moz-transition-delay: .13s;
  -o-transition-delay: .13s;
  -webkit-transition-delay: .13s;
  transition-delay: .13s
}
nav li:nth-child(2) a {
  -moz-transition-delay: .21s;
  -o-transition-delay: .21s;
  -webkit-transition-delay: .21s;
  transition-delay: .21s
}
nav li:nth-child(3) a {
  -moz-transition-delay: .29s;
  -o-transition-delay: .29s;
  -webkit-transition-delay: .29s;
  transition-delay: .29s
}
nav li:nth-child(4) a {
  -moz-transition-delay: .37s;
  -o-transition-delay: .37s;
  -webkit-transition-delay: .37s;
  transition-delay: .37s
}
nav li:nth-child(5) a {
  -moz-transition-delay: .45s;
  -o-transition-delay: .45s;
  -webkit-transition-delay: .45s;
  transition-delay: .45s
}
nav li:nth-child(6) a {
  -moz-transition-delay: .53s;
  -o-transition-delay: .53s;
  -webkit-transition-delay: .53s;
  transition-delay: .53s
}
nav li:nth-child(7) a {
  -moz-transition-delay: .61s;
  -o-transition-delay: .61s;
  -webkit-transition-delay: .61s;
  transition-delay: .61s
}
nav li:nth-child(8) a {
  -moz-transition-delay: .69s;
  -o-transition-delay: .69s;
  -webkit-transition-delay: .69s;
  transition-delay: .69s
}
nav li:nth-child(9) a {
  -moz-transition-delay: .77s;
  -o-transition-delay: .77s;
  -webkit-transition-delay: .77s;
  transition-delay: .77s
}
nav li:nth-child(10) a {
  -moz-transition-delay: .85s;
  -o-transition-delay: .85s;
  -webkit-transition-delay: .85s;
  transition-delay: .85s
}
nav li:nth-child(11) a {
  -moz-transition-delay: .93s;
  -o-transition-delay: .93s;
  -webkit-transition-delay: .93s;
  transition-delay: .93s
}
nav li:nth-child(12) a {
  -moz-transition-delay: 1.01s;
  -o-transition-delay: 1.01s;
  -webkit-transition-delay: 1.01s;
  transition-delay: 1.01s
}
nav li a {
  color: #fff;
  position: relative;
  display: block;
  outline: 0;
  text-decoration: none
}
label[for=main_menu], nav {
  -moz-transition: all .2s cubic-bezier(.23, 1, .32, 1);
  -o-transition: all .2s cubic-bezier(.23, 1, .32, 1);
  -webkit-transition: all .2s cubic-bezier(.23, 1, .32, 1);
  transition: all .2s cubic-bezier(.23, 1, .32, 1)
}
.hamburger {
  padding: .25em .4em;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: .15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible
}
.hamburger:hover { opacity: .7 }
.hamburger-box {
  width: 1.5em;
  height: 24px;
  display: inline-block;
  position: relative
}
.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px
}
input[name=main_menu]:checked~nav, nav { margin: 0 }
.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
  width: 1.5em;
  height: 4px;
  background-color: #fff;
  border-radius: 4px;
  position: absolute;
  transition-property: transform;
  transition-duration: .15s;
  transition-timing-function: ease
}
header, nav { background-color: #3c7eb5 }
.hamburger-inner::after, .hamburger-inner::before {
  content: "";
  display: block
}
.hamburger-inner::before { top: -10px }
.hamburger-inner::after { bottom: -10px }
.hamburger--elastic .hamburger-inner {
  top: 2px;
  transition-duration: 275ms;
  transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}
.hamburger--elastic .hamburger-inner::before {
  top: 10px;
  transition: opacity 125ms 275ms ease
}
.hamburger--elastic .hamburger-inner::after {
  top: 20px;
  transition: transform 275ms cubic-bezier(.68, -.55, .265, 1.55)
}
label[for=main_menu] {
  display: block;
  font-weight: 700;
  text-align: center;
  position: fixed;
  z-index: 500;
  top: .65em
}
input[name=main_menu] { display: none }
input[name=main_menu]:checked~nav li:nth-child(2) { border-top: 1px solid rgba(255,255,255,.3) }
input[name=main_menu]:checked~nav li a {
  color: #fff;
  padding: .9em;
  border-bottom: 1px solid rgba(255,255,255,.3)
}
input[name=main_menu]:checked~label .hamburger .hamburger-inner {
  -moz-transform: translate3d(0, 10px, 0) rotate(135deg);
  -o-transform: translate3d(0, 10px, 0) rotate(135deg);
  -ms-transform: translate3d(0, 10px, 0) rotate(135deg);
  -webkit-transform: translate3d(0, 10px, 0) rotate(135deg);
  -moz-transition-delay: 75ms;
  -o-transition-delay: 75ms;
  -webkit-transition-delay: 75ms
}
input[name=main_menu]:checked~label .hamburger .hamburger-inner::before {
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s
}
input[name=main_menu]:checked~label .hamburger .hamburger-inner::after {
  -moz-transform: translate3d(0, -20px, 0) rotate(-270deg);
  -o-transform: translate3d(0, -20px, 0) rotate(-270deg);
  -ms-transform: translate3d(0, -20px, 0) rotate(-270deg);
  -webkit-transform: translate3d(0, -20px, 0) rotate(-270deg);
  -moz-transition-delay: 75ms;
  -o-transition-delay: 75ms;
  -webkit-transition-delay: 75ms
}
nav {
  position: fixed;
  top: 0;
  width: 18em;
  height: 100%;
  -moz-transition: all .2s cubic-bezier(.17, .67, .44, .58);
  -o-transition: all .2s cubic-bezier(.17, .67, .44, .58);
  -webkit-transition: all .2s cubic-bezier(.17, .67, .44, .58);
  transition: all .2s cubic-bezier(.17, .67, .44, .58)
}

The CSS for the off-canvas menu.

@media (min-width:767px) {
nav, nav ul { width: auto }
header span.logo, label[for=main_menu] { display: none }
nav {
  box-shadow: none;
  position: relative;
  margin: 0;
  padding: .5em
}
nav ul { height: auto }
nav ul li { display: inline-block }
nav ul li a {
  left: inherit;
  border-bottom: none medium;
  padding: .5em .8em
}
}
input[name=main_menu]:checked~label .hamburger .hamburger-inner {
  transform: translate3d(0, 10px, 0) rotate(135deg);
  transition-delay: 75ms
}
input[name=main_menu]:checked~label .hamburger .hamburger-inner::before {
  transition-delay: 0s;
  opacity: 0
}
input[name=main_menu]:checked~label .hamburger .hamburger-inner::after {
  transform: translate3d(0, -20px, 0) rotate(-270deg);
  transition-delay: 75ms
}
.left_menu input[name=main_menu]:checked~section, input[name=main_menu]:checked~section {
  -moz-transform: translate3d(18em, 0, 0);
  -o-transform: translate3d(18em, 0, 0);
  -ms-transform: translate3d(18em, 0, 0);
  -webkit-transform: translate3d(18em, 0, 0);
  transform: translate3d(18em, 0, 0)
}
.left_menu input[name=main_menu]:checked~label[for=main_menu] {
  left: 15em;
  -moz-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  -o-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  -webkit-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  transition: left .2s cubic-bezier(.23, 1, .32, 1)
}
@media (max-width:767px) {
.left_menu nav li a {
  left: -100%;
  -moz-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  -o-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  -webkit-transition: left .2s cubic-bezier(.23, 1, .32, 1);
  transition: left .2s cubic-bezier(.23, 1, .32, 1)
}
.left_menu nav {
  left: 0;
  margin-left: -18.8em
}
.left_menu input[name=main_menu]:checked~nav li a { left: 0 }
.left_menu input[name=main_menu]~label[for=main_menu] { left: .5em }
nav ul { width: 18em }
}