Hamburger Menu

What is Hamburger Menu

It is a jQuery plugin for web applications on mobile devices.

This plugin helps the web developer to easily build web applications menus on mobile devices.

Click here to go to the GitHub jsonQuery repository.

Click here to view a demo.

Click here to download the demo.

[Expand]

Table of contents

• What is HamburgerMenu
• Getting Started
• Option Reference
• mainContent
• url
• urlType
• urlCache
• urlParam
• onClickHamburgerMenu
• position
• fromTo

It is very easy to be used. Just add the following element to your HTML code:

And run the following javascript:

$("#hamburgerMenu").hamburgerMenu({
			mainContent: 'mainContent',
		   
		}, [
			{"id":"Brain","href":"index.html","text":"Pinky"},
			{"id":"Spongebob","href":"Spongebob.html","text":"Sponge Bob"},
			{"id":"Ghostbusters","href":"Ghostbusters.html","text":"Ghostbusters"},
			{"id":"fraggle","href":"other.html","text":"Fraggle rock"}
		]
);

Try a demo of HambugerMenu in action here.

Getting Started

1º. Add a reference to amburgerMenu style sheet. You can customize this file for getting the appearance of your web application.

2º. Add a reference to jQuery library.

3º. Add a reference to jQueryui library. This library is optional for add an animation effect to display the menu.

4º. Add a reference to amburgerMenu library.

5º. Add the following element to your HTML code.

6º. Finally encapsulates the content of your page into a div element. The html structure would be like:

And run the following javascript to generate the menu:

$( document ).ready(function() {
	$("#hamburgerMenu").hamburgerMenu({
				mainContent: 'mainContent',                        
			},
			[
				{"id":"Brain","href":"index.html","text":"Pinky"},
				{"id":"Spongebob","href":"Spongebob.html","text":"Sponge Bob"},
				{"id":"Ghostbusters","href":"Ghostbusters.html","text":"Ghostbusters"},
				{"id":"fraggle","href":"other.html","text":"Fraggle rock"}
			]
	);
});

mainContent: It is the container that encapsulates the content of your page.

The json format to create the menu is shown below:

{
  "id":"identifier of the menu",
  "href": "specifies the url goes to",
  "text": "text of the menu"
}

Instead of json data you can pass a URL as a parameter. This url has to return a json with the data of the menu. amburgerMenu conduct a ajax call to this url and generate the menu. For this and more features click on the "options reference" menu.

Options Reference

mainContent: Identifier of Container that encapsulates the content of your page.

url: Url that return a json with the menu. AmburgerMenu conduct a ajax call to this url and generate the menu.

urlType: Type ajax call (get, post, ..) to url for generate the menu.

urlCache: True or false. If the ajax call is cached or not.

urlParam: Parameters to be passed to the ajax call.

onClickHamburgerMenu: Callback function for the click event of each menu.

onClickHamburgerMenu: function (op, o) {

}

Example:

$("#hamburgerMenu").hamburgerMenu({
	mainContent: 'mainContent',
	url:'getMenu',
	urlType: 'get',
	urlCache:false,
	urlParam:'{id:1}',
	position:'left',
	fromTo:'leftRight',
	onClickHamburgerMenu: function (o) {
		alert('click in menu:'+$(o.target).text());
	}
});

You can pass another parameter with the data of the menu in json format. With these data the menu will be formed if the url parameter is not passed.

$("#hamburgerMenu").hamburgerMenu({
		mainContent: 'mainContent',
		onClickHamburgerMenu: function (o) {

		}
	},
	[
		{"id":"Brain","href":"index.html","text":"Pinky"},
		{"id":"Spongebob","href":"Spongebob.html","text":"Sponge Bob"},
		{"id":"Ghostbusters","href":"Ghostbusters.html","text":"Ghostbusters"},
		{"id":"fraggle","href":"other.html","text":"Fraggle rock"}
	]
);

position: The side where the menu is placed. left or right.

left

right

fromTo: Values: leftRight, rightLeft, topDown. Side from where the menu start and where it moves to.

leftRight

rightLeft

topDown