13 hand-picked Vertical and horizontal CSS Menus

Wednesday, August 20th, 2008

Text:

| Print

| Share:

This is a list of vertical and horizontal CSS menus, it includes 13 various styles of navigation menus, vertical menus, and tab menus. Navigation menus is one of the most important elements for web design.
This post has two parts:
1- In the part one I’ve put some tutorials and snippets for making vertical and horizontal CSS menus.
2- And the second part introduces you some web-sites for download beautiful CSS menus.
I hope you to enjoy them.

CSS Menus

Vertical Menu with Hover Effect using CSS

Creating a three-level rollover vertical menu with CSS

Using CSS and HTML to create menus is simple and efficient, as it allows you to build and expand the menu by adding new levels and items easily. In this tutorial, we’ll build a three-level rollover menu that expands vertically when the user moves their mouse over the items.

CSS Drive vertical menu links

Vertical menu links with an image rollover, achived by changing its background image. The height of each link here is deliberately set to be shorter than that of its background image, which can create an interesting clipping effect depending on the image used.

Arrow Bullet List Menu

This CSS list menu features category headers with a two toned background, UL elements that have their default margins and padding removed, and finally, LI elements with custom bullet images. The result is something simple but elegant, and resembling something you might have seen on this site already

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.

Glossy Vertical Menu

This is a CSS vertical menu that uses a thin, repeating background image that changes when the mouse moves over a link. The image is glossy looking with an indent at the bottom to create a nice separation between links.

Blue Blocks Menu

This is an attractive “blocks” CSS menu with an accompanying hover effect. We added some changes of our own to the CSS to create a consistent menu width across browsers.