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