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

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:

The HTML:

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

Excellent CSS Menu will implement thanks
Posted by brent on 05/31, 03:42 PM
the light blue at bottom looks a bit odd. except it thing is nice.
Posted by Shaon on 06/06, 03:06 PM
do you know how i can change all the background colours, sorry i'm new to this.
Posted by jane on 06/19, 07:32 AM
its a good script, i have use one on my blog. thanks for dynamicdrive team, thanks for free script. i put your url on my blog. http://medscript.blogspot.com
Posted by Sumedi on 07/02, 04:13 AM
Nice work! Thanks!
Posted by Alexander on 07/09, 07:19 AM
Not too sure what I am doing here...but I have placed the menu in a left frame, but I have added too many selections and now I can't seem to scroll down to see the last one. Is this fixable with the script, or do I have to do something in DW?

Any help would be great!
Posted by Dan on 08/06, 12:53 AM
Can any one help me make the above blueblocks menu so that it has sub menus like, Example:

http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/

No need to include th "the single image" as in the submenu example.

I REALLY APPRECIATE ANY ASSISTANCE!!!!!!
Posted by Michael Brooks on 08/18, 04:11 PM
Thanks for the menu, its really nice.

Iam not shure if this is spelling mistake in the IE Hack (w\idth)

w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */


I guess this is right : (width)

width: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */

Please let me know if I am wrong or right...

I added the code without the / and it works great.

Thanks again for this great page!
Posted by play piano on 12/07, 03:31 PM
HI GARY, Thank you very murch, it's very great.
Posted by nguyen van thuan on 12/08, 05:09 AM
New to CSS and this site has helped a lot!

Now, on this menu, how do I make the width of the blocks wider? I have tried various things but none I have tried work.

Thoughts anyone?
Posted by Paul Hurm on 01/01, 08:53 PM

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


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