---

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

• A Demo Page Showing Most of the Features

Item Creation

• Auto-Generated Menu Items from Headers
• Custom Menu Items

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.

• Top Left
• Top Right
• Left Center
• Right Center
• Bottom Left
• Bottom Right

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

• Blue
• Dark
• Green
• Light

Flat UI

• Amethyst
• Asbestos
• Asphalt
• Blue
• Emerald
• Orange
• Pumpkin
• Red
• Silver
• Turquoise

---

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.

• Insert Custom Content Before or After the Menu
• Show After X Pixels Scrolled
• Change the Show/Hide Speed
• Enable/Disable Auto Tracking of Anchors in the Menu
• Enable/Disable the Smooth Scroll to Anchors
• Enable/Disable Auto Parsing of the current URL for Hash Values (Anchors)
• Enable/Disable Auto Showing of the Menu on Page Load
• Switch Between a Simple Slide or Fade Animation in the Menu
• Simple API for Developers to Use
• Add Custom Buttons

---

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
});