13 hand-picked Vertical and horizontal CSS Menus
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.
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.
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
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.
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.
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.
Horizontal Menu - Simple Blue Tabbed
Download CSS menus
11 CSS menu for download
Free CSS feature CSS menus from various web designers and developers throughout the net.
Popularity: 73% [?]
Tags: bottom, bullet images, Buttons, css tab menu, horizontal css menu, javascript menu, Menu, Menus, navigation, navigation menus, tab, tab menus, vertical css menu, vertical menu, vertical menus
12:14 am on August 21st, 2008
I love CSS and these will help alot thanks
Max
1:44 pm on August 28th, 2008
thanks for this list.its worth it.thanks again
Ronald