nav_toggle_hover_01

HTML

<nav onclick="navtoggle();">
  <div class="nav-inner">
    <div class="nav-btn"></div>
    <div class="nav-btn-inner"><div class="nav-bars"><div></div><div></div><div></div></div></div>
  </div>
</nav>

<div class="container">Qui quia enim in. Repellat dolor nostrum repellat accusamus nostrum. Explicabo et ab voluptatem laudantium earum doloribus laudantium aliquid.

Nemo aliquam earum repellendus. Quidem suscipit sint eum. Quis debitis et reiciendis ullam cupiditate in sapiente. Natus autem vel itaque.

Blanditiis quisquam quia delectus. Et eaque consequatur quo rerum eum. Quos neque esse quasi voluptates vel id est. Laudantium ut aperiam quia pariatur expedita numquam dolor error.

Voluptatem laudantium laudantium aut vero ratione nulla pariatur aut. Et ipsum omnis quia ullam. Voluptatem nam voluptatem dolor vel in sunt. Animi molestias soluta quia. Esse quae autem expedita eaque autem magni rerum.

Quisquam provident amet delectus libero neque ut et. Quas consequatur dolorem tenetur voluptatem sed optio omnis. Iure consectetur voluptatem explicabo et nam quas dolor mollitia. Doloribus eaque vitae qui quibusdam veniam deleniti aut. Nostrum et maiores ab consectetur commodi voluptates iure.</div>

CSS

html, body {
  margin: 0;
}

.container {
  top: 100%;
  position: absolute;
}

/* JUST HERE TO UTILIZE :HOVER */
nav {
  /*background: #f9f9f9;*/
  width: 60px;
  position: fixed;
  bottom: 0;
  top: 0;
}

nav:hover .nav-inner {
  transform: translateX(-170px);
}

.nav-inner {
  background: #666;
  width: 200px;
  position: fixed;
  bottom: 0;
  top: 0;
  transition: all 0.3s ease-out;
  transform: translateX(-200px);
  will-change: transform;
}

.nav-open {
  transform: translateX(0) !important;
}

/* LARGER, TO MAKE BTN SELECT EASIER */
.nav-btn {
  width: 75px;
  height: 90px;
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  cursor: pointer;
  background: #000;
  background: transparent;
  z-index: 20;
}

/* VISUAL BTN */
.nav-btn-inner {
  width: 50px;
  height: 70px;
  background: #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -50px;
}

.nav-bars {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 auto;
  right: 16px;
}

.nav-bars div {
  height: 5px;
  background: #fff;
  width: 20px;
  margin-bottom: 6px;
}

JavaScript

var enableNavToggle = true;
var navInnerDom = document.getElementsByClassName('nav-inner')[0];

function navtoggle() {
 	if (enableNavToggle) {
  	enableNavToggle = false;
		navInnerDom.classList = 'nav-inner nav-open';  
  }
	else {
  	enableNavToggle = true;
    navInnerDom.classList = 'nav-inner';  
  }
}