Navigation

fusionCSS makes use of JavaScript to convert horizontal or vertical navigation marked with the slideInMenu class into a menu that slides into view on demand. This functionality requires fusionCSS.js to be included.

Horizontal Navigation

<ul class="hnav">
	<li><a href="#stay">Link</a></li>
	<li class="active"><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
</ul>

Horizontal Navigation (Pill)

<ul class="hnav pill">
	<li><a href="#stay">Link</a></li>
	<li class="active"><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
</ul>

Vertical Navigation

The vertical navigation can be automatically converted to a drop down list when the browser width falls below 768 pixels by includeing the class collapseMenu e.g. <ul class="vnav collapseMenu">.

<ul class="vnav">
	<li><a href="#stay">Link</a></li>
	<li class="active"><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
</ul>

Breadcrumb

Converts an unordered list item into a breadcrumb.

<ul class="breadcrumbwidget">
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li>Link</li>
</ul>

Breadcrumb (Path)

Converts an unordered list item into a path style breadcrumb.

<ul class="breadcrumbwidget path">
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li>Link</li>
</ul>

Breadcrumb (Section)

Converts an unordered list item into a section style breadcrumb.

<ul class="breadcrumbwidget section">
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li>Link</li>
</ul>

Breadcrumb (Flat)

Converts an unordered list item into a flat breadcrumb.

<ul class="breadcrumbwidget flat">
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li>Current</li>
</ul>
<ul class="breadcrumbwidget flat">
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Link</a></li>
	<li><a href="#stay">Current</a></li>
</ul>

Pagination

Converts an unordered list item into a pagination widget, it is designed to style the pagination widget within fusionLib.

<ul class="paginationwidget">
	<li><span>1</span></li>
	<li><a href="#stay">2</a></li>
	<li><a href="#stay">3</a></li>
	<li><a href="#stay">4</a></li>
	<li><a href="#stay">5</a></li>
	<li><a href="#stay">></a></li>
	<li><<a href="#stay">»</a></li>
</ul>

Mobile Navigation

fusionCSS can convert an unordered list into a slide out navigation menu.

Adding the class slideInMenu generates a slide out menu from the list.

For a slide in menu an element with an id of viewSlideInMenu is required, when the user clicks this element the slide in menu is displayed.

<ul class="hnav pill slideInMenu">
	<li><a href="#stay">Menu Item 1</a></li>
	<li><a href="#stay">Menu Item 2</a></li>
	<li><a href="#stay">Menu Item 3</a></li>
</ul>

<div id="viewSlideInMenu">MENU</div>
Top