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 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{
width180px;
border-right1px solid #000;
padding0 0 1em 0;
margin-bottom1em;
font-family'Trebuchet MS''Lucida Grande'Arialsans-serif;
font-size90%;
background-color#90bade;
color#333;
}

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

#blueblock ul{
list-stylenone;
margin0;
padding0;
bordernone;
}

#blueblock li {
border-bottom1px solid #90bade;
margin0;
}

html #blueblock li {
b\order-bottomnone;
margin: -1;
}

#blueblock li a{
displayblock;
padding5px 5px 5px 8px;
border-left10px solid #1958b7;
border-right10px solid #508fc4;
background-color#2175bc;
color#fff;
text-decorationnone;
width100%;
}

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

#blueblock li a:hover{
border-left10px solid #1c64d1;
border-right10px 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.
Copyright 2006-2011 Dynamic Drive Read our Usage Terms before using any of the CSS codes.