Dynamic Drive CSS Library- Button Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Vertical CSS Menus: Here

Button Vertical Menu

Author: Dynamic Drive

By giving each menu link a ridge border with contrasting top/left and right/bottom background colors, the result is a slightly beveled button menu.

Demo:

The CSS:

<style type="text/css">

.buttonmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px;
}

.buttonmenu li a{
color: white;
display: block;
width: 100%;
padding: 2px 4px;
text-decoration: none;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0; /*light dark dark light*/
background-color: #704968;
text-decoration:none;
}


.buttonmenu li a:visited{
color: white;
}

.buttonmenu li a:hover, .buttonmenu li a:active{
color: black;
background-color: #CDB4C8;
}

</style>

The HTML:

<ul class="buttonmenu">
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>		
</ul>

Code Info

Rate this code:

Date Posted: 04/30/2006

Revision History: None

Usage Terms: Click here

Your Comments (24)

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 >

#kieren, This code does NOT work corect in Firefox.

Posted by lepensky on 02/21, 06:02 PM

can someone help me turn this into a horizontal menu

Posted by Mathees on 03/26, 11:14 PM

to EDWIN: look at the page source...

Posted by asia on 06/29, 11:35 AM

i want make drop down manue. which is client requried.
so pls send me some sample. on my mail id

Posted by tara singh on 07/18, 03:07 AM

好样的

Posted by 好的 on 09/25, 01:41 AM

Cool and easy to customize. Thanks a lot.

Posted by Tedel on 10/19, 09:29 AM

Hi, I'm very new to CSS coding, but what I would like to know is what do I need to do with both the CSS code and the HTML code? Do I put both codes into one document and save it as a html file? I'm confused as to what I need to do with both codes. If someone could tell me what I need to do with both codes that would be great.

Posted by Em on 11/21, 04:31 PM

Hi,
I need two level vertical CSS menu. Can you help me in that. Also I need to have this bevel effect. What things I will have to change for that?

Posted by Mandar on 12/17, 10:24 PM

I planned to replace script-driven menu on CSS-based one.
The problem with that menu (and probably, with other css menus) is the item representing an active link does not keep higlighted - it is reset on its own.
Every time i click on the item, new window opens (in the same window) and cursor remains on the same place, and item is highlighted (due to a:hover setting), but then when I move mouse pointer down or away from the menu area, active link item turns to look like the remaining list items - no highlight any longer.
Any idea how to make it remain highlighted on the current (active) URL page.
Thanks,

Posted by sergey on 04/21, 12:48 AM

I did not see any image of scroll-up so I do not know even if we are discussing about the same notion can you please,mail me an image of this? thanks,haim.

Posted by haim dor on 05/01, 02:27 PM

Comment Pages 2 of 3 pages < 1 2 3 >

Commenting is not available in this weblog entry.