Website Navigation Menu Toolbox

by Steven Snell

on May 30, 2010

in Resources

When designing a website, one of the most important elements is the navigation. Both in terms of usability and appearance, navigation menus typically will have a significant influence on the outcome of the design. In this post we’ll feature more than 60 tutorials, resources, and items of inspiration that can help in your own design and development work with navigation menus.

Tutorials for Creating Navigation Menus:

If you’re looking to improve your navigation menu or design one for a new site, this collection of tutorials will show you how to accomplish many different types of menus.

Sexy Drop Down Menu with jQuery and CSS

Sexy Drop Down Menu with jQuery and CSS

Create Vimeo-Like Top Navigation

Create Vimeo-Like Top Navigation

CSS Tabs Menu with Dropdowns

CSS Tabs Menu with Dropdowns

Create Apple.com-Like Breadcrumb Using Simple CSS

Create Apple.com-Like Breadcrumb Using Simple CSS

Simple Scalable CSS Based Breadcrumbs

Simple Scalable CSS Based Breadcrumbs

Advanced CSS Menu

Advanced CSS Menu

Pastel Color Menu with Dynamic Submenu Using CSS

Pastel Color Menu with Dynamic Submenu Using CSS

CSS Sliding Door Using Only One Image

CSS Sliding Door Using Only One Image

How to Create a CSS Menu Using Image Sprites

How to Create a CSS Menu Using Image Sprites

How-to: DropDown CSS Menu

How-to: DropDown CSS Menu

CSS Overlapping Tab Menus

CSS Overlapping Tab Menus

Create a Multilevel Dropdown Menu with CSS and Improve it with jQuery

Create a Multilevel Dropdown Menu with CSS and Improve it with jQuery

Easy CSS Dropdown Menus

Easy CSS Dropdown Menus

Designing the Digg Header

Designing the Digg Header

Super Fantastic CSS Navigation Image Rollovers

Super Fantastic CSS Navigation Image Rollovers

CSS Navigation Rollovers with Drop-downs

CSS Navigation Rollovers with Drop-downs

Elegant Glass-Style Navigation Bar Using CSS and Toggle Animated Effect

Elegant Glass-Style Navigation Bar Using CSS and Toggle Animated Effect

Vertical CSS Menu with a “Behavior” File

Vertical CSS Menu with a

Navigation Bar with Tabs Using CSS and Sliding Doors Effect

Navigation Bar with Tabs Using CSS and Sliding Doors Effect

Flickr-Like Horizontal Menu

Flickr-Like Horizontal Menu

CSS Sprite Navigation Tutorial

CSS Sprite Navigation Tutorial

How to Create a Slick and Clean Button in Photoshop

How to Create a Slick and Clean Button in Photoshop

How to Create a Stunning Vista Inspired Menu

How to Create a Stunning Vista Inspired Menu

Glossy Navigation Tutorial

Glossy Navigation Tutorial

Tutorial: Stylish Black Buttons

Tutorial: Stylish Black Buttons

Clean and Dark Navigation Bar

Clean and Dark Navigation Bar

Resources for Creating Navigation Menus:

These resources can be helpful for quickly creating a menu. SomeĀ  provide the code for various menus, while others allow you to choose some details about the menu that you want, and then the code is generated for you.

Listamatic

Listamatic

Listamatic 2

Listamatic 2

Menus from Dynamic Drive

Menus from Dynamic Drive

13 Styles

13 Styles

Exploding Boy Vertical Menus

Exploding Boy Vertical Menus

Exploding Boy Sliding Doors Menus

Exploding Boy Sliding Doors Menus

DevSnippets

DevSnippets

Free Menu Designs from e-lusion.com

Free Menu Designs from e-lusion.com

CSS Menu Generator

CSS Menu Generator

Menus from CSS Play

Menus from CSS Play

CSS Menu Maker

CSS Menu Maker

IzzyMenu

IzzyMenu

Styled Menus

Styled Menus

CSS Menu Builder

CSS Menu Builder

Inspirational Navigation Menus:

If you would like to design an improved navigation menu but you’re not sure which route to take, here is a collection of inspirational menus that should give you some ideas.

Power to the Poster

Power to the Poster

45royale

45royale

Chris Jennings

Chris Jennings

Assaroe Falls

Assaroe Falls

Outlaw Design Blog

Outlaw Design Blog

Inner Metro Green

Inner Metro Green

The Ernest Hemingway Collection

The Ernest Hemingway Collection

30elm

30elm

Nuttersmark

Nuttersmark

Good

Good

Fall for Tennessee

Fall for Tennessee

Jobs on the Wall

Jobs on the Wall

Blogger Bake Off

Blogger Bake Off

Epicurious

Epicurious

Family Life

Family Life

Inkd

Inkd

Onehub

Onehub

Tennessee Vacation

Tennessee Vacation

FAIRspot

FAIRspot

Wire & Twine

Wire & Twine

College Park Church

College Park Church

Articles on Usability and Best Practices for Navigation:

Navigation plays a large role in the usability of a website, so aesthetics should not be the only concern. These articles cover various topics related to the subject.

For more designer toolboxes, please see:

Powered by Shutterstock

About Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+