Menus and Navigation

Unless you limit yourself to one-page web sites, you'll need to design navigation. In fact, navigation is among the most important parts of any web design, and requires a great deal of thought if visitors are to move around your site easily.
By: Rachel Andrew

Hybrid CSS Dropdowns

It’s yet another CSS dropdown article — but one that resolves many problems associated with common dropdown methods and degrades beautifully. Hybrid CSS dropdowns allow access to all pages, keep the user aware of where she is within the site, and are clean and light to boot. It’s a tasty little vitamin pill, so quit sighing and try it.
By: Eric Shepherd

Suckerfish Dropdowns

Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.
By: Patrick Griffiths & Dan Webb

Build Your Site Navigation With CSS

Could anything look more boring than basic text links? Plain text displayed in the not very attractive colors of blue and purple, with no background colors, no rollovers, and nothing to make the page visually appealing...
By: Larisa Thomason

A Stripe of List Style Inspiration

The CSS styled unordered list has rightfully become the standard markup for site navigation. There are enough beautifully styled navigation blocks out there that attest to the unlimited styling potential of the unordered link list, but are we really letting them achieve their potential?
By: Jason Beaird

37 CSS Navigation Techniques

A continuously updated listing of CSS menu techniques.
By: Vitaly Friedman

Pure CSS Rollovers

In this tutorial you're going to see how to create a roll over text link.
By: WestCiv

Advanced CSS Rollovers

Forget JavaScript – you can create dynamic rollover images using just CSS. And once you've mastered the basic concept, many creative possibilities open up.
By: Dave Sawyer McFarland

CSS Indent Menu

Using two gradient background images, this horizontal CSS menu makes the active/ selected menu item appear indented. The width of the menu is set to 80% of its container in the demo .The entire menu markup plus images combined comes in at a very lean 2.5kb.
By: Dynamic Drive

Inverted Shift Down Menu

This clean CSS horizontal menu contains tabs with text that shift downwards slightly when the mouse rolls over it. And just for demonstration, it shows how to make the bottom corners of each tab rounded using both CSS3 and Mozilla's proprietary declarations for rounded corners. Note that the rounded corners effect is currently only visible in Firefox (and future CSS3 browsers).
By: Dynamic Drive

Sliding Doors Vertical Menu

This nicely padded vertical menu swaps between two background images depending on whether the mouse is over or out of a menu item. To ensure a perfectly smooth transition between image change (especially in IE), it uses the Sliding Doors technique and a single background image that merges the two backgrounds into it.
By: Dynamic Drive

Advanced CSS Menu

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.
By: Nick La

Bold CSS Buttons

These big, bold CSS buttons are constructed using a rounded edge button image sliced into two pieces, then put back together using CSS. The button text style reacts on the "hover" state.
By: Dynamic Drive

PNG Transparency Menu

A Sliding Doors technique for your beautiful css/list-based rollover menus with PNG transparency, that works in IE6.
By: Nate Weiner

Advanced CSS Menu Trick - Blur

This article is about not only altering the state of the navigation item the user is currently rolling over, but also the non navigation items as well.
By: 3.7 Designs

Elegant navigation bar using CSS

This tutorial explains how to design an elegant navigation bar (gettyone inspired) for your site using CSS.
By: Antonio Lupetti

Mini Slide Navigation

This tutorial uses a couple of navigation treatments - Simplebits' MiniTabs and SlayerOffice's Focus Slide, creating a "mash-up" of the two.
By: Stephen Clark

Clean Tab Bar Using CSS

This tutorial explains how to design a clean Tab Bar (Digg-like) with rounded tabs (liquid width) using CSS and just one background image.
By: Antonio Lupetti

4 Uber Cool CSS Techniques For Links

Links (A tags) are one of the most important elements on your document. There wouldn't be any navigation without it, would it? The main feature that made following techniques possible is cross browser :hover pseudo class support. Each of these techniques is pure css, no ugly hacks, no JavaScript.
By: Alen Grakalic

CSS Graphic Menu with Rollovers

This tutorial will show You how to code website menu using unordered lists, and valid xHTML/CSS. No JavaScript was used!
By: Barat

Illustrative Menu Rollovers

This tutorial shows you how to create a css based menu system that has the look of an illustration. (IE6 requires extra javascript to work, however)
By: Web Designer Wall