Menu

Documentation updated on December 7th.

Description

The Menu widget works by folding the information in categories. It lets you organize large lists of links. The user select one of the folds so making focus in a part of the large list.

Demo

Code snippet

<ul id="example">
	<li>
		<span>Ninja 1</span>
		<ul>
			<li><a href="#">Ninja 1.1</a></li>
			<li><a href="#">Ninja 1.2</a></li>
		</ul>
	</li>
	<li>
		<span>Ninja 2</span>
		<ul>
			<li><a href="#">Ninja 2.1</a></li>
			<li><a href="#">Ninja 2.2</a></li>
		</ul>
	</li>
	<li>
		<span>Ninja 3</span>
		<ul>
			<li><a href="#">Ninja 3.1</a></li>
			<li><a href="#">Ninja 3.2</a></li>
		</ul>
	</li>
	<li>
		<a href="#">Ninja 4</a>
	</li>
</ul>

Instance component

This is the way to create a new Menu:

var foo = $("#example").menu();

Configuration

Any widget can be configurated through parameters written in JSON. Here is an example:

var foo = $("#example").menu({
	"bar": foobar,
	"baz": quux
});

You can see the complete list of parameters in Menu API documentation.

Basics

Open by default

The folds are by default closed. But you can use the selected property to open a specific children. This is the way to initialize the component with a selected item:

var foo = $("#example").menu({"seleted": "2"});

Events

The main widget's actions trigger custom events, which you can suscribe to execute any action.

Here is an example of the ready event, triggered when component ends its load process:

foo.on("ready", function () {
	var that = this; // Where "this" is the returned object of component
});

You can see the complete list of events in Menu API documentation.

Learn more about events on our step-by-step guide.

The "select" event

When a fold is being selected, the select event is dispatched. You can set a callback function.