Advertisement

It is true to say that visitors will look at your navigation menu and will immediately leave your site if you don’t have a clear and directive navigation.

There are 2 types of navigation menu:- horizontal or vertical navigation menu. Horizontal menu has became the mainstream in web design, probably due to the space limitations. This is true especially for blogs or content related websites. Although they may have vertical navigation menu at sidebar, but the primary navigation will be the horizontal menu.

We have a showcase article for navigation menu before, but we would like to focus on some tips, tricks, tutorials and some showcases of horizontal navigation menus here.

Location Of Your Navigation Menu

Let’s start with the location of your navigation menu. Where should you place your menu? There are 3 places where you can place it:-

  • Top of the page, above the logo or banner.
  • Beside your logo or banner.
  • Below the logo or banner.

Example: Artificial Studio

Artificial Studio

The navigation menu sits on top of the logo and content. They also use different color to represent different links and destinations.

Example: Cosmic Soda

Cosmic Soda

The menu standing right beside the logo.

Naming For The Links

Use common and understandable name for the links. This is exceptionally important as unusual terms will drive visitors away from your site.

There are a few standard terms such as “About or About Us”, “Portfolio”, “Contact or Contact Us”. Just make sure you follow the conventional terms and don’t be too creative!

Horizontal Menu With Drop Down Menus

If you are going to implement multi level drop down menu, make sure you place an indicator for links that will reveal drop down menu.

Another consideration when you build your multi level drop down menu is the compatibility across the major browsers. Make sure it works properly and it is not cluttered if the anchor text is too long.

Example: inkd

inkd

inkd has a user-friendly multi level drop down menu that works well across different browsers.

Main Navigation With Other Components

Some websites do include other components such as search box or other buttons on their main navigation bar.

Make sure you clearly distinguish between the navigation links and the buttons. Navigation links shouldn’t sit at the left while other components should sit at the right hand side.

Example: Bookkeeping in a box

Bookkeeping in a box

The buy now button is clearly distinguished with the main navigation menu.

Tutorials

How to Make a Smooth Animated Menu with jQuery

This tutorial teaches you how to create a smooth animate navigation menu with jQuery framework.

How to Make a Smooth Animated Menu with jQuery

WordPress: “Magazine style” Horizontal dropdown menu

A magazine style drop down menu tutorial for WordPress users.

Wordpress:

A Stylish Navigation Menu With jQuery

A simple horizontal menu tutorial, with the uses of jQuery for the hover effect on menu.

A Stylish Navigation Menu With jQuery

Kwicks for jQuery and an awesome horizontal animated menu

The author demonstrate how to use both jQuery and its plugin, Kwicks to build an awesome horizontal menu with a nice Mootools effect.

Kwicks for jQuery and an awesome horizontal animated menu

Horizontal Subnav with CSS

This tutorial will walk through how to create horizontal menu with second level navigation using both jQuery and CSS.

Horizontal Subnav with CSS

Showcases

Tennessee Vacation

Tennessee Vacation

Studio Racket

Studio Racket

Bazar Solidale

Bazar Solidale

The Creative Dot

The Creative Dot

Vince Mazza

Vince Mazza

Under the Sun Garden Centers

Under the Sun Garden Centers

Loodo

Loodo

Sarah Longnecker

Sarah Longnecker

Ryan Couser

Ryan Couser

Rzepak Pure Pl

Rzepak Pure Pl

Regines Patisserie

Regines Patisserie

Sarah Hyland

Sarah Hyland

MacRabbit

MacRabbit

Face Designs

Face Designs

Manndible Cafe

Manndible Cafe

The Peach Design

The Peach Design

Green Label

Green Label

BiteClub

BiteClub

nanyate

nanyate

WE.CSS

WE.CSS

The Art of Non-Conformity

The Art of Non-Conformity

Mission Bicycle Company

Mission Bicycle Company

Petshopbox

Petshopbox

TwitterLane Interiors

TwitterLane Interiors

Owltastic

Owltastic

21st Century Odyssey

21st Century Odyssey

Lake Tahoe Ski Resort

Lake Tahoe Ski Resort

EyeMagine

EyeMagine

Wetaskiwin Regional Public Schools

Wetaskiwin Regional Public Schools

Glocal Ventures

Glocal Ventures

Hotel Arca lui Noe

Hotel Arca lui Noe

APAA

APAA

Trale

Trale