Simplest jQuery Side Push Menu Plugin - sidemenu.js

File Size: 364 KB
Views Total: 8794
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simplest jQuery Side Push Menu Plugin - sidemenu.js

sidemenu.js is an ultra-light (2kb unminified) jQuery plugin to create an user- and mobile-friendly push menu that slides out from the left or right hand side of your screen. Also known as 'off-canvas menu' or 'off screen navigation'.

How to use it:

1. Include jQuery JavaScript library and the jQuery sidemenu.js plugin's files in your web project.

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

2. Create a list of links for the off-canvas menu.

<div id="sidemenu" data-role="sidemenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Works</a></li>
    <li><a href="#">Services</a></li>
    <li class="divider"></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li class="divider"></li>
    <li><a href="#sidemenu" data-role="sidemenu-toggle">Close</a></li>

3. Create a link to toggle the off-canvas menu.

<a href="#sidemenu" 
   Open/Close side menu

4. Initialize the plugin.


5. Setup the side push menu.

side:  'left', // left or right
speed: 400 // animation speed

Change logs:


  • Completely rewrite.


  • Fix side menu style


  • Add support for Turbolinks


  • Add scrollbar to side menu

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