Off-canvas tutorial

Creating an off-canvas app look-alike menu using the jQuery.mmenu plugin is really easy. First, create a webpage like you normally would and upload it to a webserver. If you don't have one yet, I'd recommend Byte.

Next, follow the steps in this off-canvas menu tutorial. If you don't like reading that much, here's a video.

Setup the webpage

If you can, it is recommended to use the HTML5 doctype.

<!DOCTYPE html>
<html>

Now include jQuery and the jQuery.mmenu .js and .css files in the HEAD of your webpage.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.css" type="text/css" rel="stylesheet" />

If a basic menu is all you need, these files are all you need to include. If you want to use some of the extensions or add-ons, but don't know what files to include, you can simply include the "all" .js and .css files.

<head>
   <script src="path/to/jquery.js" type="text/javascript"></script>
   <script src="path/to/jquery.mmenu.all.js" type="text/javascript"></script>
   <link href="path/to/jquery.mmenu.all.css" type="text/css" rel="stylesheet" />

For a complete overview of all files you can include, check out the extensions and add-ons pages.

Have a look at the tips and tricks for some useful information about how to setup your webpage.

Next up:
The page