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

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".


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.


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

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?

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