CSS Only Mobile Push Menu

Preview:

Description:

A mobile-friendly push menu for modern web design, built using pure HTML/CSS.

How to use it:

Create a normal horizontal header navigation for your webpage.

<header class="header">
  <nav>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
    </ul>
  </nav>
</header>

Create the mobile menu controls as these:

<input type="checkbox" class="toggle-nav" id="toggle-nav">
<div class="mobile-bar">
  <label for="toggle-nav"></label>
</div>

The primary CSS/CSS3 styles.

/** Mobile Bar **/
.toggle-nav {
  display: none;
}
.mobile-bar {
  z-index: 5;
  position: relative;
  width: 100%;
  height: 60px;
  background-color: #AB47BC;
  -webkit-box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
  box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.mobile-bar label {
  position: absolute;
  top: 0;
  left: 10px;
  width: 60px;
  height: 60px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: -webkit-transform 500ms ease;
  transition: -webkit-transform 500ms ease;
  transition: transform 500ms ease;
  transition: transform 500ms ease, -webkit-transform 500ms ease;
}
.mobile-bar label:after {
  content: "\2630";
  font-size: 2em;
  color: #eee;
  line-height: 60px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: color 500ms ease;
  transition: color 500ms ease;
}
/** Slide-Out Effect **/
.toggle-nav:checked ~ .container { /** when the checkbox is checked the container slide-out **/
  -webkit-transform: translateX(70%);
  transform: translateX(70%);
  -webkit-transform: translate3d(70%, 0, 0);
  transform: translate3d(70%, 0, 0);
}
/** Label Effect (Menu Icon) **/
.toggle-nav:checked + .mobile-bar label {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
.toggle-nav:checked + .mobile-bar label:after {
  color: black;
}
/** Container **/
.container {
  position: relative;
  -webkit-transition: -webkit-transform 500ms ease;
  transition: -webkit-transform 500ms ease;
  transition: transform 500ms ease;
  transition: transform 500ms ease, -webkit-transform 500ms ease;
}
/** Header **/
.header {
  position: absolute;
  left: -70%;
  width: 70%;
  height: 100%;
  background-color: #AB47BC;
}
.header ul {
  font-size: 1.2em;
  font-weight: 100;
  text-align: center;
  text-transform: uppercase;
}
.header a {
  display: block;
  padding: 15px;
  border-bottom: 1px solid #eee;
  color: #eee;
  -webkit-transition: background-color 300ms;
  transition: background-color 300ms;
}
.header a:active {
  background-color: #9C27B0;
}

Convert the horizontal menu into a mobile-friendly push menu on small screen:

@media (min-width: 730px) {
  
  .mobile-bar {
    display: none;
  }
  
  .toggle-nav:checked ~ .container {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  
  .container {
    -webkit-transition: none;
    transition: none;
  }
  
  .header {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
  }
  
  .header ul {
    font-size: 1.1em;
  }
  
  .header li,
  .header a {
    display: inline-block;
  }
  
  .header li {
    margin-right: -6px; /** fix the inline-block margin gap **/
  }
  
  .header a {
    padding: 10px 45px;
    border-bottom: none;
  }
  
  .header a:hover {
    background-color: #9C27B0;
  }
}