Pure CSS Off-canvas Toggle Menu – navslider

Preview:

Description:

navslider is a pure CSS / LESS off-canvas navigation that uses CSS3 transition and transform tricks to reveal a sidebar navigation menu when the visitor hovers over the toggle button.

How to use it:

Create the off-canvas navigation with a toggle button.

<nav class="menu-container">
  <a href="#" class="menu-btn"></a>
  <div class="menu-slide">
    <ul class="menu-list">
      <li class="menu-item"><a href="#">Home</a></li>
      <li class="menu-item"><a href="#">Works</a></li>
      <li class="menu-item"><a href="#">Services</a></li>
      <li class="menu-item"><a href="#">About</a></li>
      <li class="menu-item"><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>

The core CSS / CSS3 styles for the navigation.

.menu-container:hover .menu-slide {
  -o-transform: translate(270px, 0);
  -moz-transform: translate(270px, 0);
  -ms-transform: translate(270px, 0);
  -webkit-transform: translate(270px, 0);
  transform: translate(270px, 0);
  opacity: 1;
}

.menu-container .menu-btn {
  color: #333333;
  position: fixed;
  top: 10px;
 left: :10px;
  cursor: pointer;
  z-index: 10000;
  font-size: 19px;
  text-decoration: none;
}

.menu-container .menu-btn:hover { color: #666666; }

.menu-container .menu-slide {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #e0e0e0;
  height: 100%;
  left: -270px;
  top: 0;
  width: 270px;
  overflow-y: auto;
  z-index: 10000;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  -webkit-transition: 6s ease-in-out;
  transition: 0.3s ease-in-out;
  position: fixed;
  opacity: 0;
}

.menu-container .menu-slide .menu-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.menu-container .menu-slide .menu-list .menu-item a {
  padding: 8px;
  display: block;
  text-decoration: none;
  color: #333333;
  transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
  font-weight: 300;
  font-family: 'Roboto', sans-serif;
}

.menu-container .menu-slide .menu-list .menu-item a:hover {
  color: #FFF;
  background-color: #333;
  transition: 0.2s ease-in-out;
  -moz-transition: 0.2s ease-in-out;
  -webkit-transition: 0.2s ease-in-out;
  -ms-transition: 0.2s ease-in-out;
  -o-transition: 0.2s ease-in-out;
}