Off-canvas tutorial

Creating an off-canvas app look-alike menu using the mmenu.js plugin is really easy. Just follow the steps in this off-canvas menu tutorial and you'll have an off-canvas menu up and running in no time.

Setup the webpage

Create a .html file like you normally would. If you can, it is recommended to use the HTML5 doctype.

<!DOCTYPE html>
<html>

Include your stylesheet(s) for styling the webpage.

<link href="path/to/my-styles.css" rel="stylesheet" />

Next, include the mmenu .js and .css files. Most commonly, .css files are included in the <head /> and .js files are included before the closing <body />.

<link href="path/to/mmenu.css" rel="stylesheet" />
<script src="path/to/mmenu.js"></script>

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

Recap

You now have a .html file which looks something like this.

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>My webpage</title>
      <link href="path/to/my-styles.css" rel="stylesheet" />
      <link href="path/to/mmenu.css" rel="stylesheet" />
   </head>
   <body>
      <script src="path/to/mmenu.js"></script>
   </body>
</html>

Next up:
The page