Using the DefaultsRun

FooNav.js can auto-generate menu items from elements in your page. By default it will look within the BODY of the page for header elements (H1,H2,H3,H4,H5,H6) but this can be changed using the options.

The JavaScript

FooNav.init()

The HTML

<!DOCTYPE html>
<html>
...
<body>
	<h1>Top Level Menu Item</h1>
	<p>Some content...</p>
	<h2>A Child Menu Item</h2>
	<p>Some more content...</p>
	<h3>A Child's Child Menu Item</h3>
	<p>Some more content...</p>
	<h1>Another Top Level Menu Item</h1>
	<p>Some content...</p>
	<h2>Another Child Menu Item</h2>
	<p>Some more content...</p>
</body>
</html>

Using a Custom ContainerRun

To change the container FooNav searches for elements you can simply change the items option and specify the jQuery selector that targets your content.

The JavaScript

FooNav.init({items: '#my_content'})

The HTML

<!DOCTYPE html>
<html>
...
<body>
	...
	<div id="my_content">
		<h1>Top Level Menu Item</h1>
		<p>Some content...</p>
		<h2>A Child Menu Item</h2>
		<p>Some more content...</p>
		<h3>A Child's Child Menu Item</h3>
		<p>Some more content...</p>
		<h1>Another Top Level Menu Item</h1>
		<p>Some content...</p>
		<h2>Another Child Menu Item</h2>
		<p>Some more content...</p>
	</div>
	...
</body>
</html>

Using a Custom Container & SelectorRun

To change the container and selector FooNav uses to search for elements you can simply change the items option to an object that specifies the two options. The order of the selector determines the hierarchy of the menu items, so when creating a custom selector the root level item selectors should be first (on the left) proceeding any child selectors.

The JavaScript

FooNav.init({
	items: {
		container: '#my_container',
		selector: '.root,.child,.child-child'
	}
})

The HTML

<!DOCTYPE html>
<html>
...
<body>
	<label class="root">Top Level Menu Item</label>
	<p>Some content...</p>
	<label class="child">A Child Menu Item</label>
	<p>Some more content...</p>
	<label class="child-child">A Child's Child Menu Item</label>
	<p>Some more content...</p>
	<label class="root">Another Top Level Menu Item</label>
	<p>Some content...</p>
	<label class="child">Another Child Menu Item</label>
	<p>Some more content...</p>
</body>
</html>

Excluding Elements

To exclude elements there is a third property of the items option, exclude, which is simply a jQuery selector of elements that must be ignored. Note that the element matching the selector and all of it's children will be ignored.

The JavaScript

FooNav.init({
	items: {
		container: '#my_container',
		selector: '.root,.child,.child-child',
		exclude: '.ignore-this-class,.and-this-one'
	}
})