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>
</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", "http://www.facebook.com"),
  new SMButtonItem("Twitter", "http://www.twitter.com"),
  new SMButtonItem("Pinterest", "http://www.pinterest.com"),
  new SMButtonItem("Google+", "http://plus.google.com"),
]));

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

sideMenu.open();
sideMenu.close();

Change logs:

2016-07-29

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

2016-07-25

• JS update

2016-07-17

• update tap plugin and improve scroll menu

2016-07-09

• enable mode module AMD and Commonjs

2015-06-08

• 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.