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 2 of 3 pages  <  1 2 3 >

Great menu... problem described above won't be a problem.... how many people do that any way?
Posted by Sinterklaas on 07/25, 03:09 PM
A wonderful menu that does not compete with the website's information.

Being a novice, how would one increase the spacing between the menu titles?
Posted by essayer2 on 08/01, 11:44 PM
You are beautiful! I've been after this exact menu for 3 days and searching the net returned complicated and non-functioning nonsense. Thank you!
Posted by Jon on 12/31, 01:00 PM
Super, but I need every item with the same width.. e.e. 100 pixels... any suggestions how to do this...played around, no sollution yet......
Posted by Alfred on 02/22, 08:21 AM
Hey, it keeps displaying vertically for me also. What am I doing wrong?
Posted by Jim on 04/10, 02:06 PM
Nice simple tutorial :)
Posted by Stefan Ashwell on 09/15, 04:21 AM
Thanks a lot! Great tip
Posted by dstzloi on 11/29, 07:02 AM
I am so glad to read such a nice post, I was looking for such type of post since a long time. Thanks for the information.
Disk encryption software - Powerful encryption software with pre-boot authentication secures 100% of your hard disk drive, including the OS.
Posted by Disk encryption software on 02/24, 11:48 AM
Very Cool...
Posted by andi on 03/07, 02:25 AM
Thanks you this is nice.
Posted by Artiajans on 04/08, 07:03 AM

Comment Pages 2 of 3 pages  <  1 2 3 >

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