Dynamic Drive CSS Library- Bevel horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free 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:

<style type="text/css">

.bevelmenu{
font: bold 13px arial;
padding: 6px 0;
margin: 0;
width: 100%;
background-color: #FFF2BF;
text-align: left; /*set value to "right" for example to align menu to the right of page*/
}

.bevelmenu li{
list-style: none;
display: inline;
}

.bevelmenu li a{
padding: 3px 0.5em;
text-decoration: none;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.bevelmenu li a:hover{
color: black;
background-color: #FFE271;
border-style: outset;
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
</style>

The HTML:

<ul class="bevelmenu">
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>

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

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.