Navigable menus

The template provides a plugin to display multi-level menus like touch devices, with sliding parts. It can also load content via AJAX, automatically

Required plugin

This feature requires the plugin file js/developr.navigable.js

How to use it

To enable this feature, simply wrap the desired menu into an element with the class navigable:

<section class="navigable">
	... menu ...
</section>

This example shows a section, but you can use a div as well. The navigable wrapper may be used anywhere, including inside another menu.

Sub-levels should be embedded within their parent element:

<section class="navigable">
	<ul class="big-menu">
		<li class="with-right-arrow">
			<span><span class="list-count">3</span>Root element</span>
			<ul class="big-menu">
				<li><a href="#">Children element</a></li>
				<li><a href="#">Children element</a></li>
				<li><a href="#">Children element</a></li>
				<li class="with-right-arrow">
					<span>Children with subs</span>
					<ul class="big-menu">
						<li><a href="#">Children element</a></li>
						<li><a href="#">Children element</a></li>
						<li><a href="#">Children element</a></li>
					</ul>
				</li>
			</ul>
		</li>
		...
	</ul>
</section>

Here is an example result:

Back button text

Since v1.4, the back button will display the text of the parent element. If you want to set a custom text instead, you may do one of the following:

// Change default (affect all menus)
$.template.navigable.backText = 'Back';

<!-- Set an inline option -->
<section class="navigable" data-navigable-options='{"backText":"Back"}'>
Open a menu element at startup

If you want the menu to be open at startup to show a specific element (for instance, the current page), add the class navigable-current to this element:

<section class="navigable">
	...
	<li><a href="#" class="navigable-current">Current element</a></li>
	...
</section>

You can also add the class current to the element to add the corresponding visual styling.

Reset menu to main level

Since version 1.4, you can now reset the menu to its main level by calling this on the menu:

$('.navigable').navigableReset();

AJAX content loading

To speed up loading, you may want to include only root elements, and load their content via AJAX. This is really simple with this plugin, just set the menu as a link with the content URL as href and add the class navigable-ajax - for instance:

<section class="navigable">
	<ul class="big-menu">
		<li class="with-right-arrow">
			<a href="path-to-content" class="navigable-ajax">With ajax sub-menu</a>
		</li>
		...
	</ul>
</section>

Note that instead of a link, you may use a span with a special data attribute:

<section class="navigable">
	<ul class="big-menu">
		<li class="with-right-arrow">
			<span data-navigable-url="path-to-content" class="navigable-ajax">With ajax sub-menu</span>
		</li>
		...
	</ul>
</section>

Here is a demo:

The plugin will display a loading animation, and when the content is loaded, append it to the clicked element as a sub-menu. Note that the loaded content should be an already formatted output, the plugin won't perform any transformation on it.

If loading fails, a message is displayed using the notification plugin (if available).

Load event

You can listen to the custom event navigable-ajax-loaded to be notified when an AJAX menu is loaded:

$('.navigable').on('navigable-ajax-loaded', function()
{
	// The event is triggered on the option that was clicked
	var clicked = $(this);

	// To retrieve the new menu's UL, use:
	var menu = clicked.closest('li').children('ul');
	...
});