Dynamic Drive CSS Library- Blue Blocks Menu

CSS Library

CSS Layouts

Web Graphics

Free Graphics

Online Tools:

Advertise Here

CSS Library: Vertical CSS Menus: Here

Blue Blocks Menu

Author: Mark Newhouse- Taming Lists

This is an attractive "blocks" CSS menu with an accompanying hover effect. We added some changes of our own to the CSS to create a consistent menu width across browsers.

Demo:

The CSS:

<style type="text/css">

#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

</style>

The HTML:

<div id="blueblock">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (41)

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

Great looking menu but IE messes it up. Here's the code I added to make it appear OK in FF, IE6 & 7

<style type="text/css">

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

#blueblock{
width: 180px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

* html #blueblock{ /*IE 6 only */
w\idth: 180px; /*Box model bug: 180px minus all left and right paddings for #blueblock */;
}

#blueblock ul{
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#blueblock li {
border-bottom: 1px solid #90bade;
margin: 0;
}

* html #blueblock li {
b\order-bottom: none;
margin: -1;
}

#blueblock li a{
display: block;
padding: 5px 5px 5px 8px;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

</style> 

Posted by Rose on 11/19, 01:14 AM

hi Roy thanks for the code. where do i paste the codes you gave me

Posted by Mathees on 11/24, 10:56 AM

cool ;)

Posted by sameer on 12/06, 01:33 AM

Change the colors in the Div below:

#blueblock li a:hover{
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

Posted by Karl Wills on 12/21, 12:09 PM

Dynamic Drive have done it again with another brilliant script. I didn't know that DD had set up this fabulous CSS code section and I thank you guys for it.

Rock on!

Dave...

Posted by Dave on 12/30, 01:07 PM

Thanks for code !

Posted by Russie on 01/01, 08:41 AM

how can you make it so the css style sheet also has the links in it. so that when you change it it changes on all your pages?
thanks any help would..help

Posted by Steve on 03/04, 08:48 PM

Zane - Give each <li> it's own id and make a custom CSS rule for each one:

<style type="text/css">
li#one a:hover{background-color:#336699;
li#two a:hover{background-color:#FF3366;
</style>
...
<li id="one">...</li>
<li id="two">...</li> 

Posted by Tom on 04/19, 02:58 PM

It's really cool. Thanks a lot mate

Posted by Kostas on 05/17, 07:08 PM

I love this. I'm going to put it on the next layour for my website. Thanks so much!

Posted by asmodeus on 05/25, 11:12 PM

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

Commenting is not available in this weblog entry.