10 CSS Navigation Menus : 26th March 2008
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
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
This navigation menu works both vertically and horizontally, being fully compatible with all browsers.
3. 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
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
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
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
9. A walk-through of different CSS navigation techniques
Comments and Discussion
Great article, point 11) is missing, www.IzzyMenu.com - Free CSS Menu Builder :)
Great article. View my menu! It's the point 1!! :)
Excellent Post~ This is exactly what i was looking for. Thanks mate.
I love number 3, its kinda unique. Thanks for sharing.
Nice post, thanks for sharing.
Thank you :-)
Great - especially like number 1.
