Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library
 
CSS Library
Submit an original CSS code
CSS Layouts
Web 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:

The CSS:

The HTML:

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

It is quite good...Like the contrast bet. the items and the titles...better then the version where there is no title...Kewl...
Posted by Regac on 08/29, 03:12 PM
I'm using @charset "ISO-8859-1"; in my css file and am using <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> in the HTML file and I still get the white space error in IE that FanShui got. How do I fix that?
Posted by Jacob on 10/31, 11:19 PM
The code is very well constructed... it's an awesome primer for the newbies!
Posted by Claude Gelinas on 12/05, 01:16 AM
To correct the white space problem if you test this example, you must add on the top of your page the line :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
Posted by LAMARE Hugo on 12/20, 03:29 AM
Of course, this is a great menu but is more better if you use IE7.0 with 6.0 some changes are not valid.
Posted by Luis on 12/21, 01:45 PM
Attractive implementation of a good idea, but I wonder why you use div headings instead of h tags for the category divider names. That would give a more semantic markup with the accessibility and SEO benefits that such an approach would offer.
Posted by michael mckee on 01/02, 11:03 AM
Very good menu. It is usefull and looks GREAT!
I love it!
Posted by wabik90 on 01/27, 09:02 AM
Highlighting with PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html>
<
head>
<
title>Title</title>
<
style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#ddblueblockmenu{
border1px solid black;
border-bottom-width0;
width185px;
background-color#2175bc;
}

#ddblueblockmenu ul{
margin0;
padding0;
list-
style-typenone;
fontnormal 60'Verdana''Trebuchet MS''Lucida Grande'Arialsans-serif;
}

#ddblueblockmenu li a{
displayblock;
padding3px 0;
padding-left9px;
width169px/*185px minus all left/right paddings and margins*/
text-decorationnone;
colorwhite;
background-color#2175bc;
border-bottom1px solid #90bade;
border-left7px solid #1958b7;
}
#ddblueblockmenu li a:hover {
background-color#2586d7;
border-left-color#ffcc66;
}

html #ddblueblockmenu li a{ /*IE only */
width187px/*IE 5*/
width169px/*185px minus all left/right paddings and margins*/
}

#ddblueblockmenu2{
border1px solid black;
border-bottom-width0;
width185px;
background-color#2175bc;
}

#ddblueblockmenu2 ul{
margin0;
padding0;
list-
style-typenone;
fontnormal 60'Verdana''Trebuchet MS''Lucida Grande'Arialsans-serif;
}

#ddblueblockmenu2 li a{
displayblock;
padding3px 0;
padding-left9px;
width169px/*185px minus all left/right paddings and margins*/
text-decorationnone;
colorwhite;
background-color#2586d7;
border-bottom1px solid #90bade;
border-left7px solid #1958b7;
border-left-color#ffcc66;
}

#ddblueblockmenu2 li a:hover{
background-color#2586d7;
border-left-color#ffcc66;
}

#ddblueblockmenu div.menutitle{
colorwhite;
border-bottom1px solid black;
padding1px 0;
padding-left5px;
background-color#4260b8;
fontbold 70'Verdana''Trebuchet MS''Lucida Grande'Arialsans-serif;
}

</style>
</
head>

<
body leftmargin="0" topmargin="0" bottommargin="0" marginheight="0" marginwidth="0" rightmargin="0">


<?
echo '<div id="ddblueblockmenu">';
echo 
"\n";
$hptnav_arr=array("Indexes","Overviews Europe","Products for this country","Sort by","Links");
$nav_arr=array("All Regions|Africa & Middle East|Americas|Asia & Pacific|Europe","Payment Solutions|MIS|Partner|Bank Partner|Insurances|Other Services","Lodge Card (BTA)|Corporate Card|Business Card|Business Gold Card|MIS","Date|Editor","World Amex Websites|GNS Partner List");
$hptlng=count($hptnav_arr);
$navlng=count($nav_arr);
$ids=1;
for(
$n=0;$n<$hptlng;$n++){
echo "\n\t";
echo 
'<div class="menutitle">'.$hptnav_arr[$n].'</div>';
echo 
"\n\t\t";
echo 
'<ul>';
$newarr=explode("|",$nav_arr[$n]);
$nlng=count($newarr);
for(
$i=0;$i<$nlng;$i++){
$nid
=($n+$ids);
echo 
"\n\t\t\t";
if(
$n!=$hptlng){
if(isset($_GET['snavid']) && $_GET['snavid']==$nid){
echo '</ul></div><div id="ddblueblockmenu2"><ul><li id="'.$nid.'" name="nam'.$nid.'"><a href="index2.php?snavid='.$nid.'" id="" name="">'.$newarr[$i].'</a></li></ul></div><div id="ddblueblockmenu"><ul>';
else {
echo '<li id="'.$nid.'" name="nam'.$nid.'"><a href="index2.php?snavid='.$nid.'" id="" name="">'.$newarr[$i].'</a></li>';
}

else if ($n==$hptlng{
echo '<li id="'.$nid.'" name="nam'.$nid.'"><a href="#" id="'.$nid.'" name="nam'.$nid.'" style="border-bottom-color: black"> </a></li>';
}
$ids
++;
}
echo "\n\t\t";
echo 
'</ul>';
echo 
"\n";
}
echo '</div>';
?>

</body>
</
html
Posted by jugin on 02/28, 04:58 AM
I'm trying to use this Verticle menu with a liquid layout "CSS Liquid Layout #2.2- (Fluid-Fixed)" and it works in Firefox, but in IE the right column disappears when I'm using the two together.
Any help is very very much appreciated.
Email: 1@jensencs.com
Posted by Nicholas Jensen on 05/02, 08:47 PM
Hi, im having some trougle of getting this to work. Ive used another menu and it work after some time. But ive tryed to figure this one out too. mainly i have a Box that i would like to fit it in. its 400x400 pixels so the pixel size shoudlen matter. Can someone give a beginner some guidance please.
Posted by Chris on 07/02, 04:23 PM

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


Commenting is not available in this weblog entry.
Copyright 2006-2014 Dynamic Drive Read our Usage Terms before using any of the CSS codes.