Diseños web: Horizontal Navigation Menus: Tips, Tricks and Showcases

viernes, 3 de junio de 2011

Horizontal Navigation Menus: Tips, Tricks and Showcases

Horizontal Navigation Menus: Tips, Tricks and Showcases: "
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

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

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