Horizontal Navigation

In this version of the application template, we've added the option to create a horizontal navigation scheme. Horizontal navigation appears as a bar with links across the top of the page. Clicking any link gives it a "tab" appearance. If that tab has sub-menu items, clicking the tab displays a second horizontal bar of sub-menu links below the main horizontal bar.

For a code example, please reference the code we used to create the horizontal navigation for this site.

Difficulty: 2 out of 5 stars

Notes about implementing Horizontal Navigation

• You can implement up to 2 levels of horizontal navigation
• A div with id="hNav" wraps around both navigation lists
• To make a link active, the li gets class="here"

Why use Horizontal Navigation?

Making the decision to use horizontal navigation instead of vertical navigation is mostly a cosmetic choice. However, keep in mind that:

• If you need more than 2 levels of navigation, vertical is best since it supports up to 4 levels (as compared to 2 levels for horizontal).
• If your application requires a wider content area, implement horizontal navigation.

IMPORTANT: Never use both hoizontal and vertical navigation in the same application.