Website Navigation Menu Toolbox

by Steven Snell

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+

  • Alex Flueras

    May 30th

    Impressive collection. I would add a tutorial for building a mega menu: http://www.geektantra.com/projects/jquery-megamenu-2/ and the Fancy Drop Down Menu: http://www.webdesigndev.com/wp-content/uploads/2009/07/fancydropdown.html.

  • Freelance Web Designer

    May 31st

    Nice! Pretty much everything you need to know to build a good navigation system for your website!

  • Jennifer R

    May 31st

    This topic is not new with us but thanks for your sharing :)

  • Marcipa

    May 31st

    Nice collection.

    thanks for shareing ;)

  • Eko

    May 31st

    Thanks for collecting these tutorials, tools and inspirations.

  • Claudia

    May 31st

    Sometimes is really difficult to choose the right button for a new website; I think with this collection I’ll be able to simplify my work, so thank you =)

  • Rilwis

    May 31st

    Very beautiful menus. Nice roundup, thanks for sharing.

  • vkwave

    May 31st

    great collection. Thanks for sharing.

  • lv

    Aug 10th

    awesome! thank you sooo much!

  • suredelights

    Dec 22nd

    fantastic, thanks

  • Simona

    Jan 13th

    Excellent article! Another great source for those who wants to see menus, web site trends, galleries, free extension and job for freelancers etc, visit http://www.1artmedia.com, you have online demo and free download. Hope that will be useful for you…

  • Murciano

    Feb 4th

    Good ideas for future works

  • Glass desk

    Mar 5th

    I discovered your web site from aol and it’s also superb. Thankx for offering such an incredible article.

  • mintdesignnz

    Mar 17th

    An amazing article. It’s nice to read a quality blog post. I think you made some good points in this post.

  • Gold Coast Website Design & SEO

    Aug 1st

    I have read this article before and never posted a comment, but after stumbling across this again, I have to say that it is one of the best articles I have read regarding navigation, awesome read, and very informative. I used the flickr drop down menu on a clients website and made some alterations to make the menu dynamic, works like a charm, thanks again for the share. It really helped me out.

  • Leave a Comment

    Your email address will not be published. Required fields are marked *