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

If this was something new I would be excited too.

"I'm very excited to announce the launch of a new section here on Dynamic Drive- Dynamic Drive CSS Library!" - ddadmin

Posted by Matthew Bonner on 05/11, 12:40 PM

Great Css, Its the best here..
But can you build a recurent menu version using this css stile menu,with multiple submenus for it ?
It will be the BOMB..!!!
Thanks!
Can I pot a version of it?

Posted by Eftimie on 05/19, 02:03 AM

well 3 questions . . . would it be posible to get this menu with a slide in and out feature . . . multiple sub menus . . . and a bit more 3d aspect

Posted by passer on 05/23, 07:04 PM

can someone tell me if this search engine will cache the text in the menu?

Posted by David on 05/25, 12:08 AM

if you can't highlight it with your mouse, it is not likely to be cached by search engines...

Posted by random on 05/29, 02:04 AM

It would be possible to get the menu to slide in using some javascript. You will probably be able to find a script that does that on this site.

Search engines work by copying the entire source of websites to their cache. Of course the text in the menu will be stored.

* I recommend this menu because the colors can be changed easily and it uses no images.

Posted by Nathan on 06/16, 05:10 PM

i cannot copy and paste the codes from this website, help!

Posted by Tan. on 06/28, 07:12 AM

This is hilarious...Tan..
Please take some PC lessons before you start trying to build a webpage..:)..:)..:)

Posted by Clio on 06/29, 12:12 AM

I try the code , it has no problem to run under firefox. But when i run it on the IE6.0,it appear some space(white space)under each list item(li),but this problem doesn't appear in your demo(this page) even i using IE6.0 and using the source code from this page.

Posted by FanShui on 08/13, 11:06 PM

I found the differences now, as i am using charset=iso-8859-1 is all right.

Posted by FanShui on 08/14, 01:11 AM

Comment Pages 1 of 4 pages 1 2 3 > Last »

Commenting is not available in this weblog entry.