Top 10 CSS Navigation Menus

by on 26th March 2008 with 19 Comments

Creating navigation with CSS is one of the most crucial elements of website design. Get the navigation right, and people will feel welcomed and at home. Get it wrong, and it can spell trouble for your website. This is a great collection of 10 CSS navigation examples and tutorials to get you in the creative mood.

1. CSS Fancy Menu

CSS Fancy Menu

This article gos through the creation of a custom navigation bar with some cute Javascript effects that will certainly impress your friends. Thanks to the great Mootools library, this beauty is contained in 1.5kb. Not only that, but it’s also cross browser (tested on Internet Explorer 6/7, Firefox and Safari) and accessible!

2. cssMenus

cssMenus

This navigation menu works both vertically and horizontally, being fully compatible with all browsers.

3. Advanced CSS Menu

Advanced CSS Menu

This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level – code an advanced (un-typical) list menu utilizing the CSS position property.

4. Taming CSS Lists

Taming CSS Lists

In this article, I’ll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page. Specific attention is paid to using a list as a vertical CSS menu.

5. Mini Tabs

CSS Tabs

I came up with these little “mini tabs” for navigation while working on a few projects. They’ll probably appear in the real world eventually. They are generated with pure CSS of course, and require no images.

6. Inverted Sliding Doors Tabs

Inverted Sliding Doors Tabs

This is an explanation of how I adapted Doug Bowman’s Sliding Doors technique to work with inverted tabs for a recent redesign of netrelations.se.

7. A collection of free CSS menus

8. A simple gradient CSS menu

9. A walk-through of different CSS navigation techniques

10. Mini sliding navigation

Comments & Discussion

19 Comments

Comments & Discussion

19 Comments

  1. Simon says:

    Great article, point 11) is missing, http://www.IzzyMenu.com – Free CSS Menu Builder :)

  2. Alessandro says:

    Great article. View my menu! It’s the point 1!! :)

  3. Excellent Post~

    This is exactly what i was looking for.

    Thanks mate.

  4. I love number 3, its kinda unique. Thanks for sharing.

  5. Nice post, thanks for sharing.

  6. B12 says:

    Thank you :-)

  7. Mike says:

    Great – especially like number 1.

  8. great compilation of css navs. thanks!

  9. Great post! Very useful :) Thanks for sharing.

  10. Stuart says:

    Thanks – very useful… :D

  11. These menus look great. I have created a free 100% pure css dropdown menu. It is fully customizable, including the photoshop file and simple to edit. Check out: http://caputodesignz.com/blog/?p=99

  12. Mohit says:

    Great artice. Thanks for it.

  13. Elizabeth says:

    Found that http://www.dshcool.co has an interesting set of menus for creating web sites on the site.

  14. Elizabeth says:

    Found that http://www.dschool.co has an interesting set of menus for creating web sites on the site.

    Mistyped the URL earlier…

  15. fysisoft says:

    wonderful collection. I really love it

  16. raman says:

    Nice collection, than for sharing
    I have also designed CSS top ,menu navigation bar, without using query
    Pls find time to add this in your list,
    Here it is
    http://www.designrapid.com/css-top-menu-navigation-tutorial/

Leave a Comment

Subscribe
Membership
About the Author