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

Glossy Vertical Menu

Author: Dynamic Drive

This is a CSS vertical menu that uses a thin, repeating background image that changes when the mouse moves over a link. The image is glossy looking with an indent at the bottom to create a nice separation between links.

Demo:

The two images used:

The CSS:

The HTML:

Code Info

Rate this code:

Date Posted: 06/02/2006

Revision History: None

Usage Terms: Click here

Your Comments (151)

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 15 pages  <  1 2 3 4 5 >  Last »

There are gaps between each link in when viewed in IE 7.
Posted by ta.w on 07/19, 05:29 PM
Once IE7 formally releases, I'll be going through all the CSS codes to address any issue in that browser. :)
Posted by ddadmin on 07/19, 10:35 PM
Hey nice!!!

but if i wanna submenus??
Posted by Asinox on 07/28, 04:56 PM
This is a GREAT! menu.
Posted by H3X3D on 07/31, 07:17 PM
Definitely a good menu, but an even better method of applying this would be to 1) combine the two images into one, and change the horizontal positioning on a:hover to avoid that quick bit of white space when you first hover over a link, and 2) make the images 1px wide... just to cater to the dial-up crowd even more :P.

Otherwise a fantastic menu.
Posted by Korra on 08/02, 08:48 PM
erm,i gt a question,how to change this vertical menu to a horizontal???
Posted by ben on 08/03, 01:46 AM
Making it horizontal is fairly simple--after adjusting height and width to your desire (or before, it really doesn't matter), set the li's in question (such as #nav li ) to either float: left; or display. Either or both of these methods should work (I've personally tested float: left, so I know what I'm talking about on that}. If you need further help... just respond.
Posted by Korra on 08/04, 05:35 AM
erm,then for the above code,where should i put the float: left?
Posted by ben on 08/04, 10:46 AM
How do i add in my html and tell me in detail how to put where its scripts located.

Thank you in advance.

Posted by San on 08/14/06, 4:21pm
Posted by ngysan on 08/14, 04:22 AM
Hi I need a bit of assitance on how to make this code work I understand html code to some degree but don't know anthing about css. Do I have to save the first part of this code as a .css file in the same folder or something?
thank you
Posted by Jeremy on 08/16, 10:49 AM

Comment Pages 3 of 15 pages  <  1 2 3 4 5 >  Last »


Commenting is not available in this weblog entry.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.