In an age of modern websites built to resemble native smartphone applications, the rise of the off-canvas menu popularly has become hard to ignore. Although I must say, I don’t think they are effective when viewed/used on a desktop widescreen, I do see their clear advantage on a mobile handset where every space counts.

Here’s my version of an off-canvas menu with simple jQuery.

See the Pen Off Canvas Menu by Richard (@barkins) on CodePen.

HTML

I wanted to make this as modular as possible, therefore you’ll be able to grab only the off-canvas menu code and retrofit it onto your website right away without having to reinvent the wheel.

The Menu

<div id="off-canvas">
   <nav>
     <a href="#">Menu Item 1</a>
     <a href="#">Menu Item 2</a>
     <a href="#">Menu Item 3</a>
     <a href="#">Menu Item 4</a>
     <a href="#">Menu Item 5</a>  
   </nav>
</div><!--/off-canvas-->

Trigger

We’ll need a trigger for the menu and in this case I utilized a button giving an ID of “trigger” which will reveal and hide the menu for us.

<header class="header">
  <h1>Simple Off-Canvas Menu with jQuery</h1>  
  <button id="trigger"><i class="fa fa-bars"></i></button>
</header><!--/header-->

For the sake of the example, here’s the rest of the HTML code to give you some perspective on how an off-canvas menu would look and function like within a “real” website.

<section>
   <article>     
     <p>Lorem ipsum ...</p>
  </article>
</section>

CSS

Box-sizing

Before we focus on the CSS, I just want to mention that I’m using the box-sizing method for styling the site. Learn more about box-sizing here.

Here’s the box-sizing code I’m using:

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

Styling the Menu

As always you are free to style the layout anyway you choose, but the item you should pay close attention to is the actual menu. Here’s just the CSS for the menu.

#off-canvas{
  width:250px;
  height:100%;
  top:0;
  left:-250px;
  padding:25px;
  background:#a6032f;
  position:fixed; 
  z-index:5;
}

One thing to note, you’ll need to set the position to fixed and match the left property to the width of the menu.This way when you hide and reveal the menu it will hide the entire width of the menu.

Menu Trigger

The trigger can live anywhere on your website, as long as it’s outside of the menu so you can hit it whether the menu is revealed or hidden.

Here’s the styling I used, but you can choose to modify it anyway you wish.

#trigger{
  background:#a6032f;
  color:#FFF;
  padding:10px 15px;
  border:0;
  border-radius:5px;
  line-height:auto;
  font-size:1rem;
  margin:10px 0 0;
  text-transform:uppercase;
  cursor:pointer;
  position:absolute;
  top: 15px;
  right:25px;
  box-shadow:1px 1px 0px #000;
}

jQuery

Now onto the fun part, adding in the functionality for the menu.

Start by creating a variable we’re going to use in the functionality and set it to false.

var x = false;

I took advantage of an if else statement to help determine whether the menu should be revealed or hidden.

$('#trigger').on('click', function(){
  if(!x) {
    $('#off-canvas').animate({left:"0"},200);
    x = true;
  }else{
    $('#off-canvas').animate({left:"-250px"},200);
    x = false;
  } 
});

To review this code, whenever someone taps on the trigger, the functionality will check to see if x is set to false, if so, it will animate the left property and set it to 0. At the same time, it will change the variable x to true.

Now whenever someone taps on the trigger again, the functionality will see that x is now true and jump to the else statement and animate the left property to -250px in effect hiding the menu. Lastly, it will set the x variable back to false.

Wrap Up

The basic concept here is with the help of jQuery we are able to hide, or in other words, position the menu off the canvas and toggle it with a trigger.