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

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

thanks Del with a:active works!! instead of a.selected
Posted by van on 11/06, 06:17 PM
Juli, you have to change in the css the following:
background: transparent url("here comes the path where you have saved the background image") 100% 0;
Posted by van on 11/06, 06:21 PM
Hi,
Anyone know how to fix this menu in firefox?
Posted by niki on 12/12, 06:16 AM
I feel like a moron, but I cannot get this to work. The image does not display, I've tried various ways of changing this path
background: transparent url("here comes the path where you have saved the background image")
and nothing works. Any more pointers?
Posted by Adam on 12/17, 02:12 PM
Dont feel like a moron Adam, it doesn,t work for me either and like you I have amended as requested.
Posted by Fred on 12/21, 10:21 AM
I'm the same as Juli. Copy/paste but no background colour.
Posted by Gerry Abrahams on 01/10, 03:40 AM
(Possible) solution for the background not appearing.
I am using apache and IE7.
My website looks like
index.html
   css
/style.css
   media
/arrowgreen.gif 

(with this menu in index.html, and the styles in style.css).
In order to get hte image I had to set the background entry to :
backgroundtransparent url(../media/arrowgreen.gif1000

Note the ../ before the media directory
Posted by Kenneth Beaton on 01/22, 09:28 PM
Hi!!!everyone can somebody tutor me in all programming language specially java and CSS..

thank you!!!

hope yuo can help me.
Posted by Reneboy on 01/23, 06:57 PM
hi everyone..can somebody tutor me in all programming language.

thank you

hope you can help me.

i have small backgrounds of programming
Posted by Reneboy on 01/23, 06:59 PM
Hi.
I'm using this CSS for this site: http://www.thecolonelscamp.com and I've put the ul in an include file.
Since it's in the include file, I can't assign the .selected class individually, of course.
So I've tried a billion different things to get each page to display like it would if it had the class of "selected", to no avail.

Here's what's on there now, on the "50+ Fitness Club" page:
<style type="text/css" media="screen">
.
arrowgreen li a.50plus {color#7c9a61;background-position: 100% -64px;}
</style


...and this in the body:
<div class="arrowgreen">
<!--
#include virtual="/includes/navul.htm"-->
</div


...and the include contains this:
<ul>
<
li><a href="private.html" class="private">PRIVATE TRAINING</a></li>
<
li><a href="50plus.html" class="50plus">50FITNESS CLUB</a></li>  
<
li><a href="cqa.html" class="cqa">CLOSE QTRMARTIAL ARTS</a></li
<
li><a href="womens.html" class="womens">WOMEN'S SELF DEF. CAMP</a></li> 
<li><a href="info.html" class="info">ALL LOCATIONS AND TIMES</a></li> 
<li><a href="enlist.html" class="enlist">ENLIST ONLINE</a></li>
<li><a href="gear.html" class="gear">COLONEL'
S CAMP GEAR</a></li>
<
li><a href="videos.html" class="videos">VIDEOS</a></li>
<
li><a href="uscqc.html" class="uscqc">USCQC</a></li
<
li><a href="faq.html" class="faq">FREQASKED QUESTIONS</a></li>
<
li><a href="instructors.html" class="instructors">MEET THE INSTRUCTORS</a></li>
<
li><a href="becomeinstructor.html" class="becomeinstructor">BECOME AN INSTRUCTOR</a></li>
<
li><a href="testimonials.html" class="testimonials">TESTIMONIALS</a></li
<
li><a href="contact.html" class="contact">CONTACT US</a></li
<
li><a href="index.html">HOME</a></li>
</
ul


Thanks in advance
Posted by Geezer on 02/02, 08:31 PM

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

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