Dynamic Drive CSS Library- DD Blue Blocks Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Vertical CSS Menus: Here

DD Blue Blocks Menu

Author: Dynamic Drive

This is our rendition of a block looking vertical menu, inspired by the original Blue Blocks menu and based on the CSS used by the vertical menu of our sister site CSS Drive. It supports the insertion of menu headers to act as dividers between groups of menu links.

Demo:

Dynamic Drive

CSS Library

The CSS:

<style type="text/css">

#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}

* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
}

#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

The HTML:

<div id="ddblueblockmenu">

<div class="menutitle">Dynamic Drive</div>
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
</ul>

<div class="menutitle">CSS Library</div>
<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 Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>

</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (37)

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

Thanks very much for all the great code here :) I frequently use these menu's to speed up my production time as they're robust and very easy to implement. Thank you again!!

Posted by Harmony on 07/24, 07:04 PM

Menu is great.I like the way it works.I will use it in my sites.Thanks for this job..

onebuttoninfo.net click2infoplanet.com onebuttonsearch.net searchbasket.net supplyinfo.net learntoreach.com findandlearn.com teachmemore.net searchcosmos.net cocoindirectory.com discovertoinfo.com cocoinfo.net ultimateinfo.net reachtoinfo.com learn2info.com surfingforinfo.com taketolearn.com alwaysdirectory.com

Posted by mockingbird on 07/30, 05:18 PM

Is this type of code stranded stable?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
I mean, how stable is the menu? Is this coding type by w3 under development?
I just want to make sure that this menu is stable before I add this to my web site.
Thank you, in advance, for the help.

Posted by SAM on 09/02, 01:10 AM

Yes you are right Sam,but I think it's stable enoughad.com c4i.com

Posted by for Sam on 09/21, 12:45 AM

Works great in Firefox, but requires a little tuning for the code to work properly in IE.

Posted by Carrie on 10/27, 10:35 PM

This line appears twice in the CSS:

font: Normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;

When I try to change the default "Trebuchet MS" to "Verdana" I get extra white space after the "border bottom" in IE 7. Any sugeestions?

Posted by domdeez on 01/28, 06:14 PM

I love this menu because you can separate the links by their categories with different colors. I decided to see if I could make the menu a pullout menu by using the suckertree vertical menu now I can not seem to be able to add the menutitle.
Please help.

Posted by Jerry Dumas on 02/01, 11:03 AM

If I try to use it, there is no border around the menu and menu titles are 100% wide so they are across whole page. This appears to me in FF 2.0.0.13 and IE 6.0

Posted by Tomas on 04/10, 05:22 AM

This menu is really class. But when i copy paste the code in a fresh document, a blank space appears on the right side of the menu. Can you help!!!

Posted by Preeti on 04/22, 05:28 AM

Wow,it's a pleasant surprise for me. Actually I was looking for this. Thanks a lot.
http://www.theclickdepot.com/internet-marketing-services.html

Posted by James Larson on 07/17, 12:34 AM

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

Commenting is not available in this weblog entry.