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

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

How can you remove the large white space between each submenu. Ex. space between browse all and JavaScript kit.?&&&&

Posted by znam on 11/22, 12:21 AM

Hi
Where i can but the css in my webpage

Posted by Mohamed on 01/24, 10:28 AM

How can I change the background of the tab that is selected

Posted by Chris on 01/29, 03:22 AM

Comment Pages 1 of 3 pages 1 2 3 >

Commenting is not available in this weblog entry.