Dynamic Drive CSS Library- Urban Grey Side Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

Advertise Here

CSS Library: Vertical CSS Menus: Here

Urban Grey Side Menu

Author: Dynamic Drive

This is nonchalant greyish side menu that blends right in with most designs. The menu headers are H3 tags with a non repeating background image as its bullet, while the menu links are all list based.

Demo:

CSS Library

JavaScript Kit

Single image used (2 flavors to choose from): or

The CSS:

<style type="text/css">

.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(media/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}

</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="urbangreymenu">

<h3 class="headerbar">CSS Library</h3>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<h3 class="headerbar">JavaScript Kit</h3>
<ul>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
<li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
<li><a href="http://www.javascriptkit.com/howto/">Web Design</a></li>
<li><a href="http://www.javascriptkit.com/java/">Free Java Applets</a></li>		
</ul>

</div>

Code Info

Rate this code:

Date Posted: 08/25/2008

Revision History: None

Usage Terms: Click here

Your Comments (15)

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 2 pages 1 2 >

I love this. It's simple and looks great. Though, the green image doesn't match, you can simply change that in a minute. I really love it. :)

Posted by Carolyn on 08/26, 02:09 PM

This looks really nice, good add.

Posted by Craig on 09/07, 08:09 AM

How can I change the background of the tab that is selected. In other words, when the user selects a page from the navigation, i want the navigation to then indicate on the menu as to which page is selected. Please let me know how I can do this.

Thanks.

Posted by Gaurav on 09/09, 08:52 AM

This is a cool menu, simple to use and easy to customize. Thank you.

Posted by Saeed on 09/30, 03:00 AM

Such interesting read and information, thanks for sharing this post, I've already bookmarked your blog. Lawyer Jokes

Posted by Lawyers on 09/30, 04:02 AM

I can see that you are putting a lot of time and effort into your blog and detailed articles! I am deeply in love with every single piece of information you post here. Will be back often to read more updates!
Cheers,
Learning Guitar Chords

Posted by Guitar Chords on 10/01, 08:40 PM

This looks really nice, good add.
Thanks

Posted by memo on 10/07, 08:48 AM

Just wanted to thank you for this great read!! I definitely enjoying every little bit of it :) I have you bookmarked to check out new stuff you post.Regards,
3 free credit report

Posted by credit report on 10/08, 10:52 PM

What an amazing read! Enjoyed reading every bit of it. Must admit that you are one of the best bloggers I ever saw.Thanks for posting this informatve article here.
how to unlock iphone 3g

Posted by iphone 2.0 unlock on 10/11, 07:00 PM

now , i'm learning html,coading . So , how can i study them ? Please , explain me .
And i can't make my own money. so i can't buy their lessons .
when i make my own money , i'm paying back them .
HELP ME !

Posted by naygioo on 10/15, 10:26 PM

Comment Pages 1 of 2 pages 1 2 >