SideMenu.js

JavaScript library to create side menus with full object oriented way and touch support.

How Use

1. Add the following files:

 <link rel="stylesheet" type="text/css" href="dist/css/sidemenu.css" />
 <script src="dist/js/vendors/jquery.js"></script>
 <script src="dist/js/vendors/jquery.event.tap.js"></script> <!--  (OPTIONAL) FOR FAST TAP (TOUCH) EVENT! -->
 <script src="dist/js/sidemenu.js"></script>

2. Add content and wrapper for menu.

The menu ("sm-main") will always adapt to its container.

<body>
	<!-- USE ADITIONAL sm-main-left CLASS FOR ALIGN THE MENU TO LEFT SIDE.-->
	<div id="menu" class="sm-main"></div>
</body>

NOTE: Only for full height menu you need add "sm-wrapper" how first child of body. You can create or use your own custom wrapper with other dimensions or hierarchy but do not forget add ever overflow hidden and position absolute/fixed css style.

3. Built and add the menu

// Creating the master menu (SideMenu)
var myMenu = new SideMenu([
	// adding item(s) in constructor class.
	new SMLabelItem("My first item!")
]);

// adding item after create instance.
myMenu.addItem(new SMSubMenuItem("Colors", [
   new SMLabelItem("Red"),
   new SMLabelItem("Blue"),
   new SMLabelItem("Yellow"),
   new SMLabelItem("Green"),
   new SMLabelItem("etc")
]));

// adding mix type of items with multi-level menus using "SMSubMenuItem".
myMenu.addItem(new SMSubMenuItem("Animals", [
   new SMLinkItem("Bunny", "//www.google.com.pe/?#q=Bunny"),
   new SMLinkItem("Tiger", "//www.google.com.pe/?#q=Tiger"),
   new SMLinkItem("Dog", "//www.google.com.pe/?#q=Dog"),
   new SMLinkItem("Cat", "//www.google.com.pe/?#q=Cat", "_blank"),
   new SMSubMenuItem("Birds", [
       new SMLinkItem("Eagle", "//www.google.com.pe/?#q=eagle"),
       new SMLabelItem("Hawk"),
       new SMLabelItem("Tucan"),
       new SMButtonItem("Parrot", function () {
           alert("Hello World!")
       }),
       new SMLabelItem("Chicken"),
       new SMLabelItem("Duck")
   ]),
   new SMLabelItem("Pig"),
   new SMLinkItem("Crocodile", "//www.google.com.pe/?#q=Crocodile")
]));

// Adding new single item type "SMButtonItem" with click handler;
myMenu.addItem(
    new SMButtonItem("Download File", function(){
      alert("Go Download File!");
    })
);


// Using API
myMenu.addItem(
    new SMButtonItem("Close", function () {
        myMenu.close();
    })
);

// Finally add SideMenu object to DOM tree target.
myMenu.appendTo(document.getElementById('menu'));

API documentation

SideMenu Class

Class that represent a master menu.

new SideMenu([SMItem,..], options);
		// Other methods
		.addItem(SMItem, index);
		.addItems([SMItem, SMItem,..], index);
		.open();
		.close();
		.toggle();
		.getItemByIndex(index);
		.getItemByName("Share");
		.getSubMenuByName("Animals");
		.appendTo(domTarget);

SideSubMenu Class

Represent a submenu object.

new SideSubMenu([SMItem,..], options);
	// Other methods
	.addItem(SMItem, index);
	.addItems([SMItem, SMItem,..], index);
	.open();
	.close();
	.getItemByIndex(index);
	.getItemByName("Share");
	.getSubMenuByName("Animals");

SMItem Class

Class that represent one empty list item. this class is template to create other type items.

new SMItem();
	// Other methods
	.moveToMenu(SideMenu, index);
	.moveToPosition(index);
	.remove();

SMLabelItem Class

Extend from SMItem class, and represent one item with a text title and icon.

new SMLabelItem("title", "className");

SMSubMenuItem Class

Extend from SMLabelItem, represent a single item with a submenu child.

new SMSubMenuItem("title", [SMItem,..], "className");

SMLinkItem Class

Extend from SMLabelItem, represent a native link.

new SMLinkItem("title", "url", "_blank"., "className");

SMButtonItem Class

Extend from SMItem, represent a action button item.

new SMButtonItem("name", onClickHandler);

osobrevilla/sidemenu