Dynamic Drive CSS Library- Bevel horizontal Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

Social Media Applications

PSD to HTML

Web Templates

Website Hosting

HTML Editor

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 (15)

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

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

Comment Pages 2 of 2 pages < 1 2