Let’s face it, sidebars are a hot design trend trend right now. There are tons of examples of this pattern being used all over the web. They are useful for just about everything, including marketing sites, e-commerce and admin dashboards. The pattern is pretty simple. It’s a fixed position sidebar on larger screens, and on smaller screens it collapses off-canvas. Traditionally, these are made of two separate menu’s but today we’ll make this collapsing sidebar with the Foundation Off-canvas component.

First, let’s review how Off-canvas works:

• Off-canvas-wrap - Wraps entire page including what is hidden off-canvas. This prevents horizontal scroll bars.
• Inner-wrap - Wraps your all you content and is animated when triggered. This wrapper allows the entire page to be moved over when the menu is revealed.
• Off-canvas-menu - This is where your menu contents go.
• Exit-off-canvas - Allows body to be clicked to close the off canvas menu.

Great, now that we have the basics down, we’ll get into making a modified sidebar version.

The makings of a sweet Sidebar/Off-canvas component

We’ll use Foundation’s basic unstyled off-canvas version for this lesson. With it, you can style the menu icon and sidebar any way you want.

<div class="off-canvas-wrap move-right" data-offcanvas>
  <div class="inner-wrap">

    <a class="left-off-canvas-toggle" href="#">MENU</a>

    <nav class="left-off-canvas-menu">
    <!-- Off Canvas Menu content -->
    </nav>

     <!-- main content goes here -->

    <!-- close the off-canvas menu -->
    <a class="exit-off-canvas"></a>

  </div>
</div>

You might notice we’ve added one thing. The .move-right class has been added to .off-canvas-wrap. This class is typically added by JavaScript to open the menu when the hamburger icon is clicked. Since the sidebar menu needs to visible from the get-go (on larger screens), we’ll add it now.

Now the CSS. Off-canvas uses the transform: translate3d property to essentially pull the menu off-canvas so it cannot be seen. The class .move-right will “reset” this transform so that it is not pulled off-canvas.

.move-right .inner-wrap {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  margin-left: $sidebar-width;
}

In the above CSS, margin-left is used to push the inner-wrap (your page content) over by the width of the sidebar. If you’re using SCSS, using variables will allow for easier changes. These go at the top of the SCSS partial or above the CSS for this component.

$sidebar-width: 114px;
$nav-color: #333;

                            

We also need to make the inner-wrap fit within our new smaller content area. We’ll change the default width of the inner-wrap from 100% to auto.

.inner-wrap {
  width: auto;
}
                            

Next we’ll style the off-canvas sidebar. We’re going to again, “reset” the transforms so the menu is open by default. We’ll add fixed positioning so that the menu stays put but the body scrolls.

.left-off-canvas-menu {
  -ms-transform: none;
  -webkit-transform: none;
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  transform: none;
  position: fixed;
  width: 0;
  height: 100%;
}
                            

Setting the width of the sidebar is pretty simple. We’ll just use the variable we specified earlier.

.move-right .left-off-canvas-menu {
  width: $sidebar-width;
}
                            

Alright, now we have a sidebar menu! But what happens on small screens? Well we want an off-canvas, not a sidebar there, so we’ll use a bit of jQuery to finish it up.

function sideNav() {
  if ($(window).width() < 769) {
    $('.off-canvas-wrap').removeClass('move-right');
    $('.left-off-canvas-toggle').show();
  } else {
    $('.off-canvas-wrap').addClass('move-right');
    $('.left-off-canvas-toggle').hide();
  }
}

$(window).resize(function() {
  sideNav();
});

                            

We’re checking to see if the window (viewport) width is less than 769px and if so, remove the .move-right class and collapse the menu off-canvas. While we’re there, we’ll add in the hamburger icon left-off-canvas-toggle. If the window width is greater than 769px, the menu icon will be hidden again. 769px is good breakpoint for most cases and you can adjust it to meet your content's needs.

You can get the full demo and code snippet on ZURB Building Blocks.

---