Pure CSS/CSS3 Fly-out Drawer Menu

Preview:

Description:

Creates a stylish, fly-out drawer menu with awesome smoth CSS3 powered animations. Hover over the sidebar to see the sub menu slides out from the edge of your screen. Made by IanLunn.

How to use it:

Load the prefixfree.min.js in the header for CSS3 vendor fixes.

<script src="prefixfree.min.js"></script>

Load the Font Awesome 4 for menu icons (Not required but recommended).

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Create the drawer menu using a nested Html list.

<ul class="drawer">
  <li> <a href="#"> <i class="fa fa-info-circle"></i> <span>Home</span> </a>
    <ul>
      <li> <a href="#"> <i class="fa fa-question-circle"></i> <span>About</span> </a> </li>
      <li> <a href="#"> <i class="fa fa-phone-square"></i> <span>Contact</span> </a> </li>
    </ul>
  </li>
</ul>

Add CSS Reset.

body,
ul {
  margin: 0;
  padding: 0;
}

The Core CSS/CSS3 style rules for the fly-out menu.

body { background: #45163E; }
.drawer {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  height: 100%;
  padding: .4em 0;
  background: #7D294E;
  color: white;
  text-align: center;
  font-size: 0;
}
.drawer li {
  pointer-events: none;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  list-style: none;
  line-height: 100%;
  transform: translateZ(0);
}
.drawer a {
  pointer-events: auto;
  position: relative;
  display: block;
  min-width: 5em;
  margin-bottom: .4em;
  padding: .4em;
  line-height: 100%;
  font-size: 16px;
  text-decoration: none;
  color: white;
  transition: background 0.3s;
}
.drawer a:active,
.drawer a:focus { background: #B44659; }
.drawer i {
  display: block;
  margin-bottom: .2em;
  font-size: 2em;
}
.drawer span {
  font-size: .625em;
  font-family: sans-serif;
  text-transform: uppercase;
}
.drawer li:hover ul {
  transform: translateX(0);
  background: #B44659;/* Enable this if you wish to replicate hoverIntent */
}
.drawer > li { display: block;}
.drawer > li > a { background: #7D294E; }
.drawer > li:hover { z-index: 100; }
.drawer > li:hover a { background: #B44659; }
.drawer > li a:hover { background: #F56356; }
.drawer > li > a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 4px;
  opacity: 0;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, transparent));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000', GradientType=1 );
  transition: opacity 0.5s;
}
.drawer > li:hover a:after { opacity: 1; }
.drawer > li ul {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 100%;
  height: 100%;
  width: auto;
  white-space: nowrap;
  transform: translateX(-100%);
  background: #B44659;
  transition: 0.5s transform;
}