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

Simple but very nice looking vertical menu!

Posted by Kien on 05/22, 06:27 AM

I am building a site from swish, all looks good then I went into the html codes and changed the page size and that turned out great. My question to you in the code there are background colors (in the browser the background is white), what is the code to change it to black. the browser background not the pages of my site.
Thanks

Posted by Golden on 06/11, 04:58 AM

this active code does not work for mozilla firefox :(

Posted by girish on 06/27, 01:55 AM

This code does work in firefox.

Posted by kieren on 09/18, 01:20 PM

I like this menu very much but I want to have a combination from this vertical menu with (vertical) drop-down menu (like http://tutorials.alsacreations.com/deroulant/menu-vertical.htm). Does anybody know how I can do that?

Posted by Edwin on 09/27, 01:02 PM

I have created a test page: http://www.chocolatecity.cc/menutest.html with the Button Vertical Menu, however, there is a bullet before each button. What am I doing wrong??

Posted by Chuck on 12/16, 06:12 PM

Simple and nice :)

Posted by Beatbox on 12/22, 10:26 AM

This menu is so great !!!!
But i would like to customize it :
How to to get it in an horizontal way ?
Thx for answering !

Posted by Pierrot on 01/10, 10:59 AM

Answer to Chuck :
I checked your menu on : http://www.chocolatecity.cc/menutest.html
you made a little mistake in your menu.css :
you have to remove <style...> and </style> in the css !

Posted by Pierrot on 01/10, 11:02 AM

Thanks for having this site. Im trying to teach myself this stuff and sites like this make the effort worthwhile. Theres not much to my site yet but im learning. thanks again,

Posted by Chris on 02/18, 04:55 PM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.