Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The HTML:

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.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.