Facebook Twitter Google

FooNav.js is a free jQuery plugin that creates a simple menu to help users navigate your site or content. Create your own custom menu links or let the plugin crawl your page for headers and build up a menu automatically. There are also multiple themes to match your site's look and feel, or create your own theme with a little custom CSS.

Demos

Playground

Item Creation

Positioning

The menu can be positioned at six different points around the window viewport, these are listed below and you can see them in action in this demo page by selecting them in the options table.

Themes

There are multiple themes available by default, the below lists them all individually however you can check them all out using this demo page by simply selecting them from the drop down in the options table.

Default

Flat UI

Other Features

There are a number of different ways to change to behaviour of the menu, from only showing it once a user has scrolled past a certain pixel value to adjusting whether or not to smooth scroll to anchors.

Getting Started Simple

Step 1: Include the required files

Include the foonav.min.css file.

<link href="http://example.com/css/foonav.min.css" rel="stylesheet" />

After jQuery, add the foonav.min.js file.

<script src="http://example.com/js/foonav.min.js"></script>

Step 2: Initialize and Configure

In either a JavaScript file or inline, initalize FooNav. This has to be below the foonav.js file. Some of the following settings below are defaults, and are only added for demonstration purposes.

FooNav.init({
	classes: 'fon-full-height fon-border fon-rounded fon-shadow', // Any additional classes to add to FooNav
	items: '#content', // The selector where FooNav looks for the header elements
	position: 'fon-top-right', // The position in the viewport
	theme: 'fon-light' // The theme to use
});

Getting Started Dev

Step 1: Include the required files

Include the foonav.min.css file.

<link href="http://example.com/css/foonav.min.css" rel="stylesheet" />

After jQuery, add the foonav.min.js file.

<script src="http://example.com/js/foonav.min.js"></script>

Step 2: Initialize and Configure

In either a JavaScript file or inline, initalize FooNav. This has to be below the foonav.js file. Some of the following settings below are defaults, and are only added for demonstration purposes.

FooNav.init({
	classes: 'fon-full-height fon-border fon-rounded fon-shadow', // Any additional classes to add to FooNav
	items: '#content', // The selector where FooNav looks for the header elements
	position: 'fon-top-right', // The position in the viewport
	theme: 'fon-light' // The theme to use
});

Step 3: Use the FooNav Instance

FooNav has it's own ready event to use to avoid asynchronous loading issues. You can see it below allowing you to use the FooNav API to control the plugin, binding it to whatever events you want.

FooNav.init({...configuration...}).ready(function(fnav){
	fnav.toggle(); // Toggles FooNav between open and closed states
	fnav.destroy(); // Completely destroys FooNav removing it from the DOM
	fnav.reinit({
		classes: 'fon-shadow',
		items: '#content',
		position: 'fon-top-left',
		theme: 'fon-dark'
	}); // Reinitializes FooNav with the new options
});

Should Be Ignored

These headers should be ignored by FooNav as on this page the items.exclude option is set to #comments.

Should Be Ignored Too

The exclude option allows you to specify a comma separated string of jQuery selectors that will be excluded from the auto-generated items.