jQuery Plugins › jQuery Menu Plugins ›

Fullscreen Off-canvas Navigation with jQuery and CSS3

File Size: 9.07 KB
Views Total: 4714
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2025

Chrome, IE10+, FireFox, Opera, Safari#push menu#off canvas menu#fullscreen navigation
Fullscreen Off-canvas Navigation with jQuery and CSS3

Yet another jQuery off-canvas menu script that uses CSS/CSS3 magic to reveal a mobile-friendly, fullscreen, off-screen sidebar navigation while pushing the main content section to the outside of the viewport.

How to use it:

1. Wrap your main content into the 'main' container.

<div class="main">
  ...
</div>

2. Create a icon trigger to toggle the off-canvas navigation.

<a href="#navi" class="navi-trigger"> 
  <span class="navi-icon"> 
    <svg x="0px" y="0px" width="54px" height="54px" viewBox="0 0 54 54"></svg> 
  </span> 
</a>

3. The Html for the navigation menu

<div id="navi" class="navi">
  <div class="navigation-wrapper">
    <div class="half-block">
      <h2>Navigation</h2>
      <nav>
        <ul class="primary-navi">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

4. The CSS styles for the 'main' container.

.main {
  position: relative;
  z-index: 2;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 200px 5%;
  background-color: #D7DADB;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  -moz-transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
  transition-timing-function: cubic-bezier(0.91, 0.01, 0.6, 0.99);
}

.navigation-is-open .main {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}

5. The CSS styles for menu trigger.

.navi-trigger {
  position: fixed;
  z-index: 3;
  left: 5%;
  top: 20px;
  height: 54px;
  width: 54px;
  background-color: #6DBCDB;
  border-radius: 50%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}

.navi-trigger .navi-icon {
  /* Nav icon created in CSS */
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 22px;
  height: 2px;
  background-color: #FFF;
}

.navi-trigger .navi-icon::before,
.navi-trigger .navi-icon:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #FFF;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s, top 0.3s;
  -moz-transition: -moz-transform 0.5s, width 0.5s, top 0.3s;
  transition: transform 0.5s, width 0.5s, top 0.3s;
}

.navi-trigger .navi-icon::before {
  -webkit-transform-origin: right top;
  -moz-transform-origin: right top;
  -ms-transform-origin: right top;
  -o-transform-origin: right top;
  transform-origin: right top;
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  -o-transform: translateY(-6px);
  transform: translateY(-6px);
}

.navi-trigger .navi-icon::after {
  -webkit-transform-origin: right bottom;
  -moz-transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  -o-transform-origin: right bottom;
  transform-origin: right bottom;
  -webkit-transform: translateY(6px);
  -moz-transform: translateY(6px);
  -ms-transform: translateY(6px);
  -o-transform: translateY(6px);
  transform: translateY(6px);
}

.navi-trigger svg {
  position: absolute;
  top: 0;
  left: 0;
}

.navigation-is-open .navi-trigger {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.navigation-is-open .navi-trigger .navi-icon::after,
.navigation-is-open .navi-trigger .navi-icon::before {
  /* fFrom Hamburger to Arrow */
  width: 50%;
  -webkit-transition: -webkit-transform 0.5s, width 0.5s;
  -moz-transition: -moz-transform 0.5s, width 0.5s;
  transition: transform 0.5s, width 0.5s;
}

.navigation-is-open .navi-trigger .navi-icon::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.navigation-is-open .navi-trigger .navi-icon::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

6. The CSS styles for the navigation menu.

.navi {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #6DBCDB;
  visibility: hidden;
  -webkit-transition: visibility 0s 0.7s;
  -moz-transition: visibility 0s 0.7s;
  transition: visibility 0s 0.7s;
}

.navi .navigation-wrapper {
  /* Navigation content */
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 40px 5% 40px calc(5% + 80px);
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: -webkit-transform 0.7s;
  -moz-transition: -moz-transform 0.7s;
  transition: transform 0.7s;
  -webkit-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.86, 0.01, 0.77, 0.78);
}

.navigation-is-open .navi {
  visibility: visible;
  -webkit-transition: visibility 0s 0s;
  -moz-transition: visibility 0s 0s;
  transition: visibility 0s 0s;
}

.navigation-is-open .navi .navigation-wrapper {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  -moz-transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
  transition-timing-function: cubic-bezier(0.82, 0.01, 0.77, 0.78);
}

.navi > h2 {
  position: relative;
  margin-bottom: 1.7em;
  font-size: 1.3rem;
  font-weight: 800;
  color: #2C3E50;
  text-transform: uppercase;
}

.navi > h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -20px;
  height: 1px;
  width: 60px;
  background-color: #2C3E50;
}

.navi .primary-navi { margin-top: 60px; }

.navi .primary-navi > li { margin: 1.6em 0; }

.navi .primary-navi a {
  font-family: 'Raleway', sans-serif;
  font-size: 2.4rem;
  color: #D7DADB;
  display: inline-block;
}

.navi .primary-navi a.selected { color: #ffffff; }

7. CSS3 media queries for mobile devices.

@media only screen and (min-width: 786px) {

.main { padding: 250px 10%; }

}

@media only screen and (min-width: 1170px) {

.navi-trigger { top: 40px; }

.navi .navigation-wrapper { padding: 62px 20%; }

.navi .navigation-wrapper::after {
  clear: both;
  content: "";
  display: table;
}

.navi .half-block {
  width: 50%;
  float: left;
}

.navi .primary-navi { margin-top: 0; }

.navi h2 {
  font-size: 1.5rem;
  margin-bottom: 5.6em;
}

.navi .primary-navi li { margin: 2em 0; }

.navi .primary-navi a { font-size: 2.4rem; }

}

8. Add the following JavaScript snippet after jQuery library.

jQuery(document).ready(function($){
  var isLateralNavAnimating = false;
  
  //open/close lateral navigation
  $('.navi-trigger').on('click', function(event){
    event.preventDefault();
    //stop if nav animation is running 
    if( !isLateralNavAnimating ) {
      if($(this).parents('.csstransitions').length > 0 ) isLateralNavAnimating = true; 
      
      $('body').toggleClass('navigation-is-open');
      $('.navigation-wrapper').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
        //animation is over
        isLateralNavAnimating = false;
      });
    }
  });
});

This awesome jQuery plugin is developed by tossedwarrior. For more Advanced Usages, please check the demo page or visit the official website.