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

Such interesting read and information, thanks for sharing this post, Iíve already bookmarked your blog. I can see that you are putting a lot of time and effort into your blog and detailed articles! I am deeply in love with every single piece of information you post here. Will be back often to read more updates! Genetic diseases
Posted by Genetic diseases on 05/23, 04:28 AM
Such interesting read and information, thanks for sharing this post, Iíve already bookmarked your blog. I can see that you are putting a lot of time and effort into your blog and detailed articles! I am deeply in love with every single piece of information you post here. Will be back often to read more updates! Genetic diseases
Posted by Genetic diseases on 05/23, 04:30 AM
Great tip! Worked like a charm!thanks.. http://www.thinkflick.com/freebies/apple-mac-style-image-gallery/
Posted by Wpdigger on 06/02, 11:23 PM

Comment Pages 3 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.