Off-canvas Side Nav with Adaptive Main Content

Preview:

Description:

An off-canvas side navigation system that shrinks the main content to fit within the screen when the side nav is opened. Based on CSS / CSS3 and a very little of JavaScript.

How to use it:

Create a hamburger button to toggle the side nav.

<div class="hamburger" id="hamburger" onclick="toggleSidenav();">
  <div></div>
  <div></div>
  <div></div>
</div>

Create menus for the side nav.

<nav>
  <div class="links">
    <a class="active" href="">Home</a>
    <a href="#">Blog</a>
    <a href="#">Contact</a>
    <a href="#">About</a>
  </div>
</nav>

Create main content for your website.

<div class="main">
  <section>
    <h1>Section One</h1>
  </section>
  <section>
    <h1>Section Two</h1>
  </section>
  <section>
    <h1>Section Three</h1>
  </section>
</div>

The CSS styles for the hamburger toggle.

.hamburger {
  position: fixed;
  z-index: 9999;
  padding: 15px;
}
.hamburger:hover { cursor: pointer; }
.hamburger div {
  background-color: white;
  border-radius: 1px;
  height: 6px;
  width: 30px;
}
.hamburger div:not(:last-child) { margin-bottom: 5px; }

The CSS styles for the side nav.

nav {
  background-color: white;
  display: inline-block;
  position: fixed;
  height: 100vh;
  width: 225px;
  left: -225px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}
nav a {
  display: block;
  text-decoration: none;
  text-align: center;
  color: black;
  padding: 5px 0;
}
nav a:hover { background-color: #f5f5f5; }
nav a:visited { color: black; }
nav a.active {
  background-color: black;
  color: white;
}
nav, .hamburger, .cover {
  -webkit-transition: -webkit-transform .3s;
  transition: transform .3s;
}
.sidenav-active nav, .sidenav-active .hamburger, .sidenav-active .cover {
  -webkit-transform: translateX(225px);
  -ms-transform: translateX(225px);
  transform: translateX(225px);
}

The CSS styles for the main content.

.main {
  -webkit-transition: margin-left .3s;
  transition: margin-left .3s;
}
.sidenav-active .main { margin-left: 225px; }
section {
  color: white;
  height: 100vh;
  line-height: 100vh;
  text-align: center;
}

The Javascript function to active the side nav.

function toggleSidenav() {
  document.body.classList.toggle('sidenav-active');
}