Responsive Navigation Demo: Off Canvas Sidebar Nav Pattern Using Javascript

Off Canvas Sidebar Nav JS Pattern

This pattern works the same as the previous Sidebar Nav pattern. The menu is placed off screen left until requested. The menu then slides in from the left while everything else slides off to the right.

The difference is this time Javascript is used to control the click event as opposed to using the checkbox hack.

The HTML

The html below is nearly identical to the previous patter, except that the checkbox has been removed and the labels for the menu button and the close button have been converted to links.

<nav>
  <a class="close"><span>X</span> Close</a>
  <ul id="nav">
    <li><a href="">Back to Post</a></li>
    <li><a href="sidebar-nav.html">Sidebar Nav</a></li>
    <li class="current"><a href="sidebar-nav-js.html">Sidebar Nav JS</a></li>
    <li><a href="sidebar+.html">Sidebar+</a></li>
    <li><a href="panels.html">Panels</a></li>
  </ul>
</nav>

<div class="wrapper">
  <div class="inner">
    <header>
      <a class="btn">Menu</a>
    </header>
		
    <div class="container main-content">
      <div id="content"></div>
      <div id="sidebar"></div>
    </div>
      
    <section class="subfooter"></section>
    <div id="footer"></div>
  </div>
</div>

The Default CSS

The default css is exactly the same as the checkbox Sidebar Nav pattern. In fact the only difference is since we no longer are including the checkbox, the css to hide it has been removed.

The CSS for the Open Menu

The css properties and values below are exactly what we saw with the first Sidebar Nav pattern. The difference is now that we're using Javascript for the click event we need to change the selectors.

For the click event Javascript is adding and removing a class of .open. Our selectors mostly need to replace :checked ~ nav with nav.open except for the last selector below where :checked is replaced by .open.

nav.open {
  left: 0;
}

nav.open .close {
  position: fixed;
  top: 1.5em;
  left: 4%;
  display: block;
}
		
nav.open .close span {
  border: 2px solid #fff;
  border-radius: 50%;
  padding: 0.2em 0.4em;
}
		
nav.open .close:hover span {
  border-color: #999;
}
	
#nav a {
  height: 4em;
  padding: 1em 0 1em 5%;
}

.open ~ .wrapper .inner {
  margin-right: -75%;
}

The CSS in Media Queries

Once again the css is the same as it was in the original Sidebar Nav pattern. The only difference is that :checked ~ nav is replaced with with nav.open and :checked ~ .wrapper .inner is replaced by .open ~ .wrapper .inner.

The Javascript

Javascript is used to add and remove the .open class depending on the state of the menu. We'll use a similar jQuery function to one used in a previous tutorial in this series.

When the menu button is clicked jQuery will capture the click event. It will look for an ancestor of the .btn element that has a class of .wrapper and then look for the sibling nav element and either add or remove the .open class.

Similarly with the .close link, jQuery will intercept the click event, though here it only needs to find the ancestor nav element. Since the close link is only visible when the .open class is present, we won't add it and only remove it.

$(document).ready(function() {
  $('a.btn').click(function() {
    if($(this).parents('.wrapper').siblings('nav').hasClass('open')){
      $(this).parents('.wrapper').siblings('nav').removeClass('open');
    } else {
      $(this).parents('.wrapper').siblings('nav').addClass('open');
    }
    return false;
  });

  $('a.close').click(function() {
    if($(this).parent('nav').hasClass('open')){
      $(this).parent('nav').removeClass('open');
    }
    return false;
  });
});