Dynamic Drive CSS Library- Arrow Green Vertical Menu

CSS Library

CSS Layouts

Web Graphics

Free 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:

<style type="text/css">

.arrowgreen{
	width: 180px; /*width of menu*/
	border-style: solid solid none solid;
	border-color: #94AA74;
	border-size: 1px;
	border-width: 1px;
}

.arrowgreen ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
	
.arrowgreen li a{
	font: bold 12px Verdana, Arial, Helvetica, sans-serif;
	display: block;
	background: transparent url(media/arrowgreen.gif) 100% 0;
  height: 24px; /*Set to height of bg image- padding within link (ie: 32px - 4px - 4px)*/
	padding: 4px 0 4px 10px;
	line-height: 24px; /*Set line-height of bg image- padding within link (ie: 32px - 4px - 4px)*/
	text-decoration: none;
}	
	
.arrowgreen li a:link, .arrowgreen li a:visited {
	color: #5E7830;
}

.arrowgreen li a:hover{
	color: #26370A;
	background-position: 100% -32px;
}

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

</style>

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:

<div class="arrowgreen">
	<ul>
		<li><a href="http://www.dynamicdrive.com" title="Home">Home</a></li>
		<li><a href="http://www.dynamicdrive.com/style/" class="selected" title="CSS">CSS Library</a></li>
		<li><a href="http://www.ddwhois.com" title="Whois">DD Whois</a></li>
		<li><a href="http://www.dynamicdrive.com/forums/" title="Forums">Forums</a></li>
		<li><a href="http://tools.dynamicdrive.com/" title="Tools">Webmaster Tools</a></li>
		<li><a href="http://www.javascriptkit.com" title="JavaScript">JavaScript</a></li>
	</ul>
</div>

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 :



background: transparent url(../media/arrowgreen.gif) 100% 0;

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>PRIVATE TRAINING</li>

<li>50+ FITNESS CLUB</li>  

<li>CLOSE QTR. MARTIAL ARTS</li> 

<li>WOMEN'S SELF DEF. CAMP</li> 

<li>ALL LOCATIONS AND TIMES</li> 

<li>ENLIST ONLINE</li>

<li>COLONEL'S CAMP GEAR</li>

<li>VIDEOS</li>

<li>USCQC</li> 

<li>FREQ. ASKED QUESTIONS</li>

<li>MEET THE INSTRUCTORS</li>

<li>BECOME AN INSTRUCTOR</li>

<li>TESTIMONIALS</li> 

<li>CONTACT US</li> 

<li>HOME</li>

</ul>

Thanks in advance

Posted by Geezer on 02/02, 08:31 PM

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