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 4 of 4 pages « First < 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"
Thanks,
Magazine Theme

Posted by Wordpress Theme on 04/15, 07:06 AM

fix your theme :) i use IE8beta1 and your theme is not compatibly to my IE. In firefox3.03 is ok. my project is debt quote

Posted by Jerry Trong on 05/06, 01:19 AM

This is the best theme that I had seen always!

Posted by " rel="nofollow">Karl William on 05/06, 11:45 PM

Crown Lists is a mailing list broker offering high quality business mailing lists, consumer mailing lists, direct marketing lists, medical mailing lists, email lists. We are a mailing
list company helping clients purchase lists.
http://www.CrownLists.com

Posted by Mailing list broker on 05/29, 12:42 AM

I like this CSS sprites technique. If you give me a psd file, I can simply change the color for my designs.

Posted by aloy on 06/04, 10:19 AM

Comment Pages 4 of 4 pages « First < 2 3 4

Commenting is not available in this weblog entry.