Minimal Mobile Off-canvas Menu With jQuery And CSS3

File Size: 3.86 KB
Views Total: 2270
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Minimal Mobile Off-canvas Menu With jQuery And CSS3

This is a small, handy jQuery navigation plugin for creating a mobile-friendly off-canvas side menu on your responsive, cross-platform web page. Smooth menu slide in and slide out animations based on CSS3 transitions and transforms.

How to use it:

1. Create the off-canvas side menu as these:

<section id="offcanvas">
      <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>
      <li><a href="#">Link 5</a></li>

2. Style the off-canvas menu and make it hidden on page load.

#offcanvas {
  display: none;
  position: fixed;
  top: 0;
  height: 100vh;
  background: #888;
  box-shadow: 0 0 15px #000 inset;

#offcanvas a {
  color: #FFF;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,0.5);
  padding: 15px;

3. Create a trigger element to toggle the off-canvas menu when needed.

<button id="trigger">trigger menu</button>

4. Import the latest version of jQuery library and the Mobile Offcanvas Menu's main script into the document.

<script src="" 
<script src=""></script>

5. Activate the off-canvas menu with default settings.


6. Default settings which can be used to customize the off-canvas menu.


  // trigger element
  menuTrigger: "trigger",

  // or 'left'
  position: "right",

  // animation speed
  speed: "0.3",

  // menu width
  width: "220px"

Change log:


  • fixed container can now be specified and animated

This awesome jQuery plugin is developed by jaynoe. For more Advanced Usages, please check the demo page or visit the official website.