Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web Graphics
Online Tools:

Advertise Here

CSS Library: Horizontal CSS Menus: Here

Bevel horizontal Menu

This CSS code creates a "3 state" horizontal menu out of an ordinary list. When the mouse moves over the menu, the menu item bevels up. Furthermore, in modern browsers such as Firefox (not IE6), clicking on the menu creates a depressed effect while the mouse is held down. Also see: Bevel vertical menu. The menu can easily be set to either align "left", "center", or "right" on the page, just by changing the "text-align" attribute.

The bevel effect is painlessly created by using the border-style: outset attribute. There's no need to manually color the 4 borders of the menu item.

Demo:

Left Aligned:

Center Aligned:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 04/28/2006

Revision History: None

Usage Terms: Click here

Your Comments (23)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 1 of 3 pages  1 2 3 >

Simple and easy!
Posted by Kwon Yong Woon on 05/17, 03:24 AM
what am i doing wrong, this menu keeps displaying vertically
Posted by phil on 05/25, 09:51 AM
This script is really cool can't recommed it enough
Posted by Markxxx on 06/10, 11:36 PM
Unfortunatly I can't say im a fan of this one.
Posted by kieren on 09/18, 01:12 PM
too windows classic for my liking
Posted by liam on 12/30, 07:07 AM
Great tip! Worked like a charm!
Posted by Joe on 01/24, 01:25 PM
cool script but you must use the true colors..
Posted by haber haberler on 02/05, 10:51 AM
good for understanding css, thanks..
Posted by portal.im on 02/05, 10:53 AM
very elegant and versatile
Posted by Aaron on 03/09, 03:42 PM
This menu works well and is clean and simple
However in IE7 if you increase the zoom to 125% or larger the text on each menu runs into each other and the hover color is not positioned correctly. This happens on quite a few of the menus
Can anyone help with this
Posted by Paul Basher on 04/22, 05:50 PM

Comment Pages 1 of 3 pages  1 2 3 >


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.