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

N-I-C-E. DDRIVE ROCKS!!
Posted by JaySkagnetti on 09/17, 05:49 PM
Would love to see these in different colors, or an attached .ai or .psd so we can edit our own colors.
Great work!
Posted by CedarTree on 09/18, 01:34 AM
very very nice but if two line links?
Posted by web tasarimi on 09/23, 04:22 AM
When I tried this everything worked but the selected position. What did I do wrong? Here is my CSS:

/--
.arrowgreen li a.selected{
color: #26370A;
background-position: 100% -64px;

--/
Posted by brian on 09/27, 07:29 PM
Brian,
I had to put an !important in that css code because I had conflicts with other CSS classes in my stylesheet where the position in this element was being overridden once I inserted this menu into my page.

Just a total shot in the dark, but it worked for me...
/--

.arrowgreen li a.selected
{
color: #26370A !important;
background-position: 100% -64px !important;
}

--/
Posted by JaySkagnetti on 10/01, 02:29 PM
This is TOO Good to be true! EVERYTHING ON THIS CSS IS CRAZY GOOD!
Posted by Luigi on 10/05, 02:45 PM
I'm using various styles from this site in my project.
Tank you for these.
My site is seuguiadecidades dot com dot br
Posted by Vinicius Brasil) on 10/06, 08:42 PM
what i can't understand was this code:
.arrowgreen li a.selected{
color
#26370A;
background-position100% -64px;

why it didn't use a:active instead?
Posted by Dels on 10/28, 11:15 PM
Can i use your code at my blog ?
Posted by Glubina on 10/29, 07:20 AM
I tried this one, but it didnīt work out, it doesnīt show the background green image... What did I do wrong? I made the simple "copy-paste" job!
Posted by Juli on 10/30, 03:38 AM

Comment Pages 1 of 4 pages  1 2 3 >  Last »


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