5 Off-canvas Hamburger Navigation Variations

Preview:

Description:

A project contains 5 off-canvas hamburger navigation variations from which you can choose to bring the native app navigation experience to your webpage.

What’s included:

• Variation 1: Push the main content with a parallax effect.
• Variation 2: Shrinks the main content.
• Variation 3: Shrinks the main content in a 3D space.
• Variation 4: Push the main content to the right.
• Variation 5: Animates the navigation when toggled.

How to use it:

Create the html for the navigation & main content.

<div class="page">
  <!--navigation-->
  <nav class="nav">
    <!--close button-->
    <div class="nav__close"></div>
    <!--navigation list-->
    <ul class="nav__list">
      <!--navigation item-->
      <li class="nav__item">
        <!--navigation link--><a class="nav__link" href="#" title="Home">Home</a>
      </li>
      <!--navigation item-->
      <li class="nav__item">
        <!--navigation link--><a class="nav__link" href="#" title="About">About</a>
      </li>
      <!--navigation item-->
      <li class="nav__item">
        <!--navigation link--><a class="nav__link" href="#" title="Contact">Contact</a>
      </li>
    </ul>
  </nav>
  <!--content part-->
  <div class="page__content">
    <!--open navigation button-->
    <div class="nav-open-btn">
      <div class="nav-open-btn__bar"></div>
      <div class="nav-open-btn__bar"></div>
      <div class="nav-open-btn__bar"></div>
    </div>
    <!--content block-->
    <div class="content">
      Main Content Here
    </div>
  </div>
</div>

The primary CSS/CSS3 styles.

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  overflow-x: hidden;
}

.page,
.page__content {
  position: relative;
}

.page {
  min-height: 100vh;
  -webkit-perspective: 1500px;
          perspective: 1500px;
  background-color: rgba(28, 28, 28, 0.5);
}

.page__content {
  min-height: 100vh;
  background-color: #fff;
}

/* navigation styles */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 300px;
  padding: 30px;
  box-sizing: border-box;
  background-color: #1c1c1c;
  box-shadow: 4px 0 5px 0 rgba(0, 0, 0, 0.14), 1px 0 10px 0 rgba(0, 0, 0, 0.12), 2px 0 4px -1px rgba(0, 0, 0, 0.3);
  z-index: 500;
}

/* nav list styles */
.nav__list {
  position: relative;
  padding: 0;
  margin: 45px 0 0 0;
  list-style-type: none;
}

/* nav item styles */
.nav__item:not(:last-child) {
  margin-bottom: 20px;
}

/* nav link styles */
.nav__link {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
}

.nav__link:hover {
  color: #4caf50;
}

/* nav link icon styles */
.nav__link-icon {
  position: relative;
  top: -3px;
  /* !!!use only with material design icons */
  margin-right: 10px;
  color: currentColor;
}

/* close icon styles */
.nav__close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 40px;
  height: 25px;
  cursor: pointer;
  /* close icon elements */
  /* hover effect */
}

.nav__close:before, .nav__close:after {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  display: block;
  width: 4px;
  height: 28px;
  border-radius: 10px;
  content: '';
  -webkit-transform-origin: center center;
          transform-origin: center center;
  background-color: #fff;
}

.nav__close:before {
  position: absolute;
  top: 0;
  left: 18px;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.nav__close:after {
  position: absolute;
  top: 0;
  right: 18px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.nav__close:hover:before, .nav__close:hover:after {
  background-color: #4caf50;
}

/* nav open btn styles */
.nav-open-btn {
  position: absolute;
  top: 30px;
  left: 30px;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  width: 35px;
  height: 25px;
  overflow: hidden;
  cursor: pointer;
}

.nav-open-btn.js-hidden {
  transition-property: all;
  transition-duration: 0s;
  transition-timing-function: linear;
  transition-delay: 0s;
  opacity: 0;
  visibility: hidden;
}

.nav-open-btn__bar {
  width: 100%;
  height: 5px;
  background-color: #1c1c1c;
  border-radius: 20px;
}

.nav-open-btn__bar:nth-child(1) {
  position: absolute;
  top: 0;
  left: 0;
}

.nav-open-btn__bar:nth-child(2) {
  position: absolute;
  top: 10px;
  left: 0;
}

.nav-open-btn__bar:nth-child(3) {
  position: absolute;
  top: 20px;
  left: 0;
}

The CSS for the navigation variations.

/* Demo #1: styles */
.nav--offcanvas-1 {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  left: -300px;
  /* opened styles */
}

.nav--offcanvas-1.js-opened {
  left: 0;
}

.page__content--offcanvas-1 {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  left: 0;
  /* opened styles */
}

.page__content--offcanvas-1.js-opened {
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: linear;
  transition-delay: 0s;
  left: 300px;
}

/* Demo #2: styles */
.nav--offcanvas-2 {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  left: -300px;
  /* opened styles */
}

.nav--offcanvas-2.js-opened {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  left: 0;
}

.page__content--offcanvas-2 {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: scale(1) translateX(0);
          transform: scale(1) translateX(0);
}

.page__content--offcanvas-2.js-opened {
  -webkit-transform: scale(0.8) translateX(150px);
          transform: scale(0.8) translateX(150px);
}

/* Demo #3: styles */
.nav--offcanvas-3 {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  left: -300px;
  /* opened styles */
}

.nav--offcanvas-3.js-opened {
  left: 0;
}

.page__content--offcanvas-3 {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  -webkit-transform: rotateY(0deg) translateX(0);
          transform: rotateY(0deg) translateX(0);
}

.page__content--offcanvas-3.js-opened {
  -webkit-transform: translate3d(100px, 0, -600px) rotateY(-20deg);
          transform: translate3d(100px, 0, -600px) rotateY(-20deg);
}

/* Demo #4: styles */
.nav--offcanvas-4 {
  transition-property: all;
  transition-duration: 0s;
  transition-timing-function: linear;
  transition-delay: 0s;
  max-height: 80%;
  -webkit-transform: rotateY(-75deg) translateX(-50px);
          transform: rotateY(-75deg) translateX(-50px);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  opacity: 0;
  visibility: hidden;
  /* opened styles */
}

.nav--offcanvas-4.js-opened {
  max-height: 100%;
  transition: opacity .22s linear 0s, visibility .22s linear 0s, -webkit-transform .22s linear 0s;
  transition: transform .22s linear 0s, opacity .22s linear 0s, visibility .22s linear 0s;
  transition: transform .22s linear 0s, opacity .22s linear 0s, visibility .22s linear 0s, -webkit-transform .22s linear 0s;
  -webkit-transform: rotateY(0) translateX(0);
          transform: rotateY(0) translateX(0);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  opacity: 1;
  visibility: visible;
}

.page__content--offcanvas-4 {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  left: 0;
  /* opened styles */
}

.page__content--offcanvas-4.js-opened {
  left: 300px;
}

/* Demo #5: styles */
.nav--offcanvas-5 {
  width: 50%;
  opacity: 0;
  visibility: hidden;
}

.nav--offcanvas-5.js-opened {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  width: 300px;
  opacity: 1;
  visibility: visible;
}

.page__content--offcanvas-5 {
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: linear;
  transition-delay: 0s;
  left: 0;
  /* opened styles */
}

.page__content--offcanvas-5.js-opened {
  left: 300px;
}

The necessary JavaScript to enable the navigation.

// hide nav open btn when the nav is open, adding/removing open classes to nav and content
var navOpenBtn = document.querySelector('.nav-open-btn');
var navCloseBtn = document.querySelector('.nav__close');
var nav = document.querySelector('.nav');
var pageContent = document.querySelector('.page__content');
var navList = document.querySelector('.nav__list');
var page = document.querySelector('.page');

// open nav
navOpenBtn.addEventListener('click', function () {
  navOpenBtn.classList.add('js-hidden');

  nav.classList.add('js-opened');

  pageContent.classList.add('js-opened');
});

// close nav
navCloseBtn.addEventListener('click', function () {
  navOpenBtn.classList.remove('js-hidden');

  nav.classList.remove('js-opened');

  pageContent.classList.remove('js-opened');
});

// close navigation if click outside it
page.addEventListener('click', function (e) {

  var evTarget = e.target;

  if (evTarget !== nav && nav.classList.contains('js-opened') && evTarget !== navOpenBtn && evTarget.parentNode !== navOpenBtn) {
    console.log(navOpenBtn.firstChild);

    navOpenBtn.classList.remove('js-hidden');

    nav.classList.remove('js-opened');

    pageContent.classList.remove('js-opened');
  }

});