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:
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...
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?
The code is very well constructed... it's an awesome primer for the newbies!
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">
Of course, this is a great menu but is more better if you use IE7.0 with 6.0 some changes are not valid.
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.
Very good menu. It is usefull and looks GREAT!
I love it!
I love it!
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{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
background-color: #2175bc;
}
#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 60% 'Verdana', '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;
}
#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #ffcc66;
}
* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
width: 169px; /*185px minus all left/right paddings and margins*/
}
#ddblueblockmenu2{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
background-color: #2175bc;
}
#ddblueblockmenu2 ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 60% 'Verdana', 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#ddblueblockmenu2 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: #2586d7;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
border-left-color: #ffcc66;
}
#ddblueblockmenu2 li a:hover{
background-color: #2586d7;
border-left-color: #ffcc66;
}
#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #4260b8;
font: bold 70% 'Verdana', 'Trebuchet MS', 'Lucida Grande', Arial, sans-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>
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
Any help is very very much appreciated.
Email: 1@jensencs.com
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.
Commenting is not available in this weblog entry.