Pure CSS Off-canvas Sidebar Navigation

Preview:

Description:

Just another pure CSS site navigation that slides out an 0ff-screen sidebar menu when you hover over the menu trigger button.

How to use it:

Create a sidebar navigation with a hamburger toggler.

<nav class="menu">
  <span class="hambgr"></span>
  <ul>
    <li> <a href="#">Menu 1</a> </li>
    <li> <a href="#">Menu 2</a> </li>
    <li> <a href="#">Menu 3</a> </li>
  </ul>
</nav>

The CSS to enable the off-canvas sidebar navigation.

.menu:hover {
  width: 250px;
  overflow: visible;
}
.menu {
  background: #00aff0;
  border-right: 1px solid #038ec1;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 60px;
  overflow: hidden;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 100;
}
.menu > ul { padding-left: 60px; }
.menu:hover ul { padding-left: 0; }
.menu:hover .hambgr { display: none; }
.menu li {
  position: relative;
  display: block;
  width: 250px;
  overflow: hidden;
}
.menu li a {
  border-collapse: collapse;
  border-spacing: 0;
  color: #fff;
  display: block;
  padding: 10px;
  position: absolute;
  text-decoration: none;
  transition: all 0.1s linear 0s;
  width: 100%;
  position: relative;
  z-index: 1;
}
.menu li a:hover { background: #038ec1; }
.hambgr {
  height: 4px;
  width: 30px;
  background: #fff;
  position: absolute;
  top: 20px;
  left: 14px;
}
.hambgr:before, .hambgr:after {
  background: #fff;
  content: "";
  height: 4px;
  position: absolute;
  top: -7px;
  width: 30px;
}
.hambgr:after { top: 7px; }