Dynamic Drive CSS Library- Urban Grey Side Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

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 (23)

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

How do I direct this to open in the same window. I assume it is a variation of the Target= command, but if you could direct me, that would be great.

Posted by Michael on 02/18, 12:41 AM

How the background of the tab that is selected

Posted by totge on 02/25, 02:38 PM

This is very nice. but the gap is too much between 1 heading to 2 heading to to set the gap can you people advice please

Posted by yasir on 03/10, 12:10 AM

I like the script but somehow I could not take the style out and pack it into a separate CSS-file and named it sidemenu.css. It didn't work then!

I had it on this page ...
http://www.chinabiz21.com/chinaexpat/chinavisaapplication.php
instead of the now shown menu in the right column

I added the css file to the head like ...
<link href="./../folder/sidemenu.css" rel="stylesheet" type="text/css" />
Am I missing something?

Posted by Mitch on 03/20, 10:17 AM

YASIR
look at the style part ... .urbangreymenu ul li{ .... and set the value to "0".
You can change anything you want, just play around, you'll see.

And give these guys who made it so easy for us some credit! cheers

Posted by Mitch on 03/21, 09:53 AM

Hi
i am using this menu in my .net application.But in my page, whenever any event fired or postback occurs,the menu will be automatically in expand mode.
Can anyone please help me.Its urgent..

Posted by Alok kumar Nayak on 04/05, 11:11 PM

That looks great. It is simple and attractive. Different colors might be more useful. I'll try.

Posted by Windows 7 on 05/05, 03:49 AM

Love it, simple and elegant.:o)

Posted by kramazeek on 05/14, 08:57 PM

Hey Thanks for this! I found lots that are very useful to me such as Anika presents Reuse. It's good to make some gifts for your friends during some festive season!
Boost Credit Score