Example / Nav-bar

The result:

Notice that if you disable JavaScript this menu degrades very nicely – as do all the other examples.

The code:

To create a horizontal nav-bar with a horizontal second tier and optional vertical third tier, simply include the superfish-navbar.css file after the main superfish.css file and add the class sf-navbar to the parent ul along with the usual sf-menu class (space-separated, eg. class="sf-menu sf-navbar"), and initialise as normal.

A nice option to add to this types of menu is restoring the relevant submenu when the user is not exploring other submenus. This can be done by telling Superfish the name of the class you are adding to the relevant <li> elements to indicate the path to the current page. I often have the server add the class name 'current' for this purpose, so I would initialise this menu thusly:

<!-- link to the CSS files for this menu type -->
<link rel="stylesheet" media="screen" href="superfish.css">
<link rel="stylesheet" media="screen" href="superfish-navbar.css">

<!-- link to the JavaScript files (hoverIntent is optional) -->
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>

<!-- initialise Superfish -->
<script>
	jQuery(document).ready(function(){
		jQuery('ul.sf-menu').superfish({
			pathClass:	'current'
		});
	});
</script>

Need help? Check out the Support options available to you.