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

Hi Haim,

I have this simple setup: http://www1.freewebs.com/apexservice/testPage.htm

on testPage you may select Page 1, the item goes orange as designed but just for a moment and then, when Page1 opens, the item's color is back same as all other list items.
It is not in its to-be-changed color or therwise seem as selected item to tell the visitors which page they are on.

buttonmenu.css keeps simple and contains the following:

.verticalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 260px;
font-family: Verdana;
font-size: 8.5pt;
}

.verticalmenu li a{
color: #D3D3A9;
display: block;
width: 100%;
padding: 0px 4px 0px;
font-size: 9pt;
text-decoration: none;
text-align: left;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0;
background-color:#23450E;
}

.verticalmenu li a:visited{
font-size: 9pt;
}

.verticalmenu li a:hover{
color: blue;
font-size: 9.5pt;
text-decoration: underline;
background-color: orange;
}

.verticalmenu li a:active{
color: orange;
font-size: 9.5pt;
text-decoration: none;
background-color: #23450E;
}

Posted by sergey on 05/04, 01:06 AM

FYI, I got the bullets to disappear in fire fox by adding this to my style sheet:

.buttonmenu li{
list-style:none
}

Posted by T on 05/04, 09:55 PM

Beautiful! Thank you!!!

Posted by jean on 05/10, 05:12 AM

Thanks for tips

Posted by Edy on 03/15, 09:12 AM

Comment Pages 3 of 3 pages < 1 2 3

Commenting is not available in this weblog entry.