Creating A Sliding Side Menu with jQuery and CSS3 - SideMenu.js

File Size: 55.2 KB
Views Total: 21337
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Creating A Sliding Side Menu with jQuery and CSS3 - SideMenu.js

SideMenu.js is a mobile app style navigation system allowing you to create a multilevel sliding side menu using JavaScript, Html and CSS / CSS3. SideMenu.js can be used with jQuery JavaScript library or as a standalone JavaScript library.

How to use it:

1. Load the jQuery SideMenu.js plugin's stylesheet and JS files in your document which has jQuery library installed.

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

2. Create a wrapper for the side menu.

<div class="sm-wrapper">
  <div id="menu" class="sm-main"></div>

3. Add menu items in the JavaScript.

// Adding a top level menu item
sideMenu = new SideMenu([
  new SMLabelItem("Menu 1")

// Adding a top level menu with sub menu items
sideMenu.addItem(new SMSubMenuItem("Item 2", [
  new SMButtonItem("Facebook", ""),
  new SMButtonItem("Twitter", ""),
  new SMButtonItem("Pinterest", ""),
  new SMButtonItem("Google+", ""),

4. The method to open / close the side menu.;

Change logs:


  • fix some bugs and add toogle button for test
  • add overlay option



  • update tap plugin and improve scroll menu


  • enable mode module AMD and Commonjs


  • js & css update


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