Wednesday, October 10, 2012

Exceptional CSS navigation techniques

* Click on the images for more details and tutorials.

The Menu menu

CSS navigation

This another great CSS menu Stu Nicholls that's unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.

Pure CSS hover menu

CSS navigation

In this CSS technique, you'll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on.

Matte CSS Menu

CSS navigation

Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus.

View Demo

CSS Blur Menu

CSS navigation

This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item.

View Demo

CSS Navigation with Glowing Icons

CSS navigation

This beautiful CSS menu technique can be created by following along this extensive step-by-step tutorial.

View Demo

CSS Sliding Door using only 1 image

CSS navigation

This slick CSS menu is based on the Sliding Doors technique but only uses one image.

View Demo

Navigation Matrix Reloaded

CSS navigation

This stylish navigation menu technique uses a CSS sprite.

View Demo

Woody CSS Menu

CSS navigation

Woody is a pre-made CSS menu that's ready to use and has been tested in IE6, IE 7, Firefox, Opera, Safari, Chrome. Demo in the page.

Simple Yellow Tabbed

CSS navigation

This menu is from CSS Menu Generator which has more free high quality menus. Demo in the page.

Vimeo-Like Top Navigation

CSS navigation

This CSS-based navigation menu is based on the Vimeo primary menu.

View Demo

CSS Hoverbox

CSS navigation

Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page.

Two Level Horizontal Navigation in CSS

CSS navigation

Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property.

View Demo


via Six Revisions - by