Simple Off-Canvas Menu

Share

Tweet

by Cameron Alcorn August 22, 2014   Freebies

The off-canvas menu is a fantastic way to conserve screen real estate on mobile devices, essentially, hiding the menu outside the bounds of the user’s screen, until the menu button is clicked (or tapped).

I’ve put together what is, by far, one of the lightest and simplest versions, inspired by Tom Rich’s off-canvas menu tutorial. However, I’ve put it all together, stripped it of all unnecessary styles, as well as incorporated some handy features, for your convenience.


The Download

For those who don’t want to read any further, here is the downloadable demo.


The Demos

For those who wish to view this demo, please view the following links:


Manual Installation

If you decide to incorporate the menu into an existing template, follow the instructions below.

1) Include the CSS file

As per the usual, in the <head> of the document.

<link rel="stylesheet" href="css/nav.css">

2) Include the jQuery link and JavaScript file

Immediately before the </body> tag.

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/nav.js"></script>
</body>

3) Add the menu

This should go before all content, immediately after the <body> tag:


<nav id="menu">
  <a class="menu-link">&#9776;</a>
  <ul>
    <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>


4) Put all content inside the container element

This will allow the content to be shifted left or right.

<div id="container">
  <!-- All content goes here. -->
</div>

That’s it!


Left or Right?

You can easily make the menu pop out from the left, instead of the right (the default) by adding the class="left" to the <nav> element, as you see below:

<nav id="menu" class="left">

Let’s Make That Responsive

If you’d like a more traditional menu for larger displays, I recommend making the menu responsive. You can do this by simply adding class="responsive" to the <nav> element, as you see below:

<nav id="menu" class="responsive">

This will work for both the left and right versions, as described in the above section.


Style Away!

I have intentionally left this menu almost completely unstyled, since my style will likely do nothing but hinder your progress. However, I’m sure, you can adapt it to your needs. Just take the example below:

Same off-canvas menu; different style

Same menu; Different style

Did you find this tutorial helpful? Follow me on Twitter for more.

  Comments

Written by

Business professional by day, web developer by night, when I’m not creating solutions for my clients, I’m writing or creating meaningful content for the Web.


Posted In
Freebies

Resources & Code Snippets