The navigation menu is one of the most important elements in website design. Clear, concise navigation allows users to quickly and easily find what they're looking for. And when this happens, you greatly increase your chances of a sale, new subscriber, or whatever the goal of the website is. On our latest project, freedomscubausa.com, we put a lot of focus on designing and polishing the navigation menu.

First things first: do your research

Good website navigation doesn't happen accidentally, it's researched, planned and tested. What should the main navigation items be? Does the site need subnavigation (ie. dropdown menus)? Is each link in the navigation menu easily discoverable and clickable? Will users understand what the links mean, and where a link will take them? These are some of the questions that need to be asked before designing the navigation. Once you have answers to these you can then move on to the fun part.

Designing: it's the small things that matter

Simple website navigation can be designed and implemented in just a few minutes, but chances are it will neither impress nor entice your users. Here's the menu without any styling or detailing:

And here's the finished product:

See the difference? It's not a huge difference, but many subtle effects add up to a very elegant looking navigation menu. Here's some of the techniques we used to achieve the final product.

Background

The navigation menu should not blend into the page. On the contrary, it should stand out and be easy to find. We did this by slipping a 1px wide repeating background image behind the buttons. Taking a closer look you can see that the background image is actually a gradient going from light blue on top, to a darker blue on the bottom. This effect gives it a slightly curved and 3D appearance. We also applied a 1px border to the top and bottom to really make it stand out and give it that raised appearance.

Button States

Button states (ie. pressed or active) are a great way to engage the user and provide them with a sense of control and positive feedback. Hovering the mouse over a navigation item causes the button to change to an "active" state, and when moving the mouse off the item it returns to a "normal" state. We chose to use three different button states for this design:

• Normal: the normal unselected links.
• Active: the white or highlighted link. Denotes the current page being viewed.
• Hover: a raised look when the mouse is hovering over the link.

We achieved this effect using CSS and sprites. So instead of having 3 images for each button's state (times 6 links = 18 images!) we combined the three images into one, as you can see above, and using the CSS background-position property we're able to hide the other non-active states.

Button Styles

On all of the buttons we used the letterpress technique to make the text appear as if it were stamped into the page. To do this a white drop shadow, dark inner shadow and slight gradient were applied in Photoshop. In addition to this technique we also used a slight gradient and border for the Hover button state, and a slight gradient for the active button state.

CSS Dropdowns

When there are too many links to fit in the navigation menu, a dropdown menu is often the way to go. We used CSS and the HTML unordered list element to organize evertything within the dropdown. Notice the small arrow next to a link that has a dropdown menu. This arrow alerts the user that there is something below, otherwise the user may not discover it.

Finishing Touches

To add the finishing touches to the navigation menu we used some of the new CSS3 selectors such as box-shadow, and border-radius. While these effects will not be visible in Internet Explorer, they are only subtle visual enhancements so the usability of the menu will not be affected.

See the menu in action over at freedomscubausa.com!