Collapsible menus

The template provides a plugin to display collapsible multi-level menus. It can also load content via AJAX, automatically

Required plugin

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

How to use it

To enable this feature, simply create a menu with the big-menu style and add the class collapsible:

<ul class="big-menu collapsible">
	... menu ...
</ul>

Sub-levels should be embedded within their parent element:

<ul class="big-menu collapsible">
	<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>

If you want to use up and down arrows, just add the classes with-left-arrow or with-right-arrow, the plugin will take care of adding the up and down classes.

Here is an example result:

Open a menu element at startup

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

<ul class="big-menu collapsible">
	...
	<li><a href="#" class="collapsible-current">Current element</a></li>
	...
</ul>
Limit the number of open elements

By default, all sub-menus of a given menu may be open at the same time, which results in a very long menu. To only allow one open element by level (like in an accordion), add the class as-accordion to the root element:

<ul class="big-menu collapsible as-accordion">

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 collapsible-ajax - for instance:

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

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

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

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