Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library

Advertise Here

CSS Layouts
Web Graphics
Online Tools:

CSS Library: Vertical CSS Menus: Here

Arrow Green Vertical Menu

Author: Ian Main (with changes by Dynamic Drive)

Arrow Green Menu is a vertical list based menu that uses a single background image to create 3 distinct states, by shifting the image vertically to reveal a different style. The last state is user applied, by giving the desired element a CSS class of ".selected".

Demo:

Single image used (two flavors):

The CSS:

Note: The image path referenced in the CSS above assumes you're using the first green image. If you're using the second, be sure to update the image path accordingly.

The HTML:

Code Info

Rate this code:

Date Posted: 09/15/2008

Revision History: None

Usage Terms: Click here

Your Comments (35)

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

the comment chopped out some of the code on the include a the end.
all the links have classes:
href="50plus.html" class="50plus"
Posted by Geezer on 02/02, 08:36 PM
this code does not validate, with CSS 2.0
Posted by George on 02/16, 03:03 AM
very good, nice job
Posted by scorpy on 02/19, 01:50 PM
Nice but it should have a drop down.
Posted by Shane on 02/20, 10:54 AM
Hi.

This code is perfect and I got it working. My problem is, when I reduce the image size to 3x16=48 pixels, IE introduces bizarre spacing between the <li>'s. Do you know of any work around to this?

Thanks,
Martin
Posted by Martin on 02/21, 05:28 AM
For other color variants I suggest you just use the hue/saturation feature of your vector/image editor. It can virtually create all colors of the rainbow for you.

Good luck!
Posted by Xander on 02/24, 09:23 AM
This is the most helpful site ever..
Posted by ash on 03/04, 04:11 PM
Perhaps I am missing something, but the menu never shows what page your on, even in your demo. Clearly this is not supposed to work that way, I need to show what page a user has selected.
Thanks
Posted by Daniel Hoviss on 03/07, 03:01 PM
Really nice vertical menu, well done Ian
Posted by Mark on 03/25, 08:53 AM
i kind of new to this stuff
im 14

how do you put a table next to the nav bar?
Posted by Margaret on 03/31, 07:40 PM

Comment Pages 3 of 4 pages  <  1 2 3 4 >


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