Home

CSS Examples Mark’s Blue Blocks Menu

Date: 11/11/2004 Mark’s Blue Blocks Menu

Author: Mark Newhouse- Taming Lists

A very attractive "blocks" CSS menu with hover effect. In IE Win, the links (<a>) are set to a width of 100%, while in other browsers, it's set to auto, using child selectors (html>body #button li a). This conditional CSS is possible since IE Win (6 and below) doesn't support child selectors while other modern browsers do, and is necessary, since a definition of 100% trips up Mac versions of IE5 and Mozilla.

The CSS:

#button {
width: 150px;
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;
}

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

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

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

html>body #button li a {
width: auto;
}

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

The HTML

<div id="button">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Toys and Games</a></li>
<li><a href="#">Computers</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Outdoors</a></li>
<li><a href="#">Home Appliances</a></li>
</ul>
</div>

Comments (33)

it has a great style and its simple and easy. i would prefer a transl. and blending feature on this.

#1: Oliver on 09/25 at 02:23 AM

very nice vertical menu! thanks for sharing!

#2: erika on 10/23 at 11:51 PM

thats nice

#3: felicia on 11/09 at 02:28 PM

For horizontal, include 'display: inline;' in your style sheet. Nice looking. Is on our intranet right now! He he he!

#4: Jason on 12/19 at 03:54 PM

There are 2 different versions of this tutorial so you can choose which one suits your application best. (first is best).

1. Using HTML lists
Uses the least amount of html, always a good thing.
2. Using tables
The original version of this tutorial and the common way menus are often created.
In practice both methods operates much the same way. Using lists requires the least amount of HTML (some of us hand-coders are lazy) and it's also the method I recommend.

#5: loft beds on 05/09 at 12:46 PM

Great style,thanks for the code..

csscss

#6: hayek on 06/23 at 02:28 PM

Wow! Great work there. Beautiful menu. Thank you very much..

ad.comc4i.com

#7: hayek on 09/15 at 12:43 PM

wow, it looks really great, thanks!

regards,
Mak

#8: Mak on 10/28 at 07:23 PM

How can i integrate of second level to this menu

Malik

#9: Malik on 01/17 at 06:06 AM

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

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
list-style: none;
margin: 0;
padding: 0;
border: none;
float:left

}

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

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 5px solid #1c64d1;
border-right: 5px solid #5ba3e0;
border-top: 2px solid #1c64d1;
border-bottom: 2px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}
</style>

<div id="button">
<li>Home
<li>Toys and Games
<li>Computers
<li>Electronics
<li>Furniture
<li>Outdoors
<li>Home Appliances
</div>

#10: yuinuz on 02/17 at 03:00 PM


NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top