Site map

spacer

Menu Three - some css3 features explored

The HTML

The HTML for this menu can be found on the menu index page.

CSS notes

The CSS for this menu can be found at css menu three.

The declarations used here will be implemented when CSS3 arrives (most browsers have implemented some already). The new declarations covered here are opacity, border-radius, box-shadow and linear-gradient.

At present different browsers have different vendor tags for the various methods of achieving these features. They are -moz- for gecko (Firefox, Mozilla), -webkit- for webkit (Chrome, Safari), -ms- for Internet Explorer, -o- for Opera and -khtml- for old Safari and Konqurer versions. Not all are used here.

Initial css

The width & height will alter the menu background size, change the line-height (highlighted in red) to match the height for vertically aligning the text.

Change the #content to whatever your container id is.

/* change the #content to whatever your container id is */
#menu_h1 li {
float: left;
list-style: none;
margin: 2px;
text-align: center;
}

#content #menu_h1 li.nav1 a, #content #menu_h1 li.nav1 a:visited {
display: block;
width: 100px;
height: 20px;
/* border-radius */
border-radius: 11px; /* css3 declaration */
-moz-border-radius: 11px; /* gecko */
-webkit-border-radius: 11px; /* webkit */
color: #000;
font: bold 12px/20px verdana;
text-decoration: none;
}

The css above uses the border-radius to create an 11px radius on the menu. All the css above is used as the basis for the other menus.

CSS for horizontal box shadow menu

spacer500
/* change the #content to whatever your container id is */
#content #menu_h1 li.nav1 a, #content #menu_h1 li.nav1 a:visited {
background: #f60;
/* box-shadow */
box-shadow: 5px 5px 10px #444; /* css3 declaration */
-moz-box-shadow: 5px 5px 10px #444; /* gecko */
-webkit-box-shadow: 5px 5px 10px #444; /* webkit */
}

#content #menu_h1 li.nav1 a:hover {
background: #f60;
box-shadow: inset 5px 5px 10px #444; /* css3 declaration */
-moz-box-shadow: inset 5px 5px 10px #444; /* gecko */
-webkit-box-shadow: inset 5px 5px 10px #444; /* webkit */
}

The css above uses the box-shadow to create a 5px drop shadow to the right and below the menu, with a blur radius of 10px. The inset value on the a:hover section reverses the drop shadow feature, to appear as if the menu button is pushed down.

CSS for horizontal linear gradient menu

spacer500
/* change the #content to whatever your container id is */
#content #menu_h2 li.nav1 a, #content #menu_h2 li.nav1 a:visited {
background: #55aaee;
/* linear-gradient */
background: -moz-linear-gradient(top, #55aaee, #003366); /* gecko */
/* webkit */
background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366)); 
}

#content #menu_h2 li.nav1 a:hover {
background: #003366;
background: -moz-linear-gradient(top, #003366, #55aaee); /* gecko */
/* webkit */
background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#55aaee));
}

The css above uses the linear-gradient to create a vertical #55aaee (light blue) to #003366 (dark blue) gradient on the menu button. The gradient colours are reversed for the a:hover section.

CSS for horizontal box shadow, linear gradient, opacity menu

spacer500
/* change the #content to whatever your container id is */
#content #menu_h3 li.nav1 a, #content #menu_h3 li.nav1 a:visited {
/* box-shadow */
box-shadow: 5px 5px 10px #444;
-moz-box-shadow: 5px 5px 10px #444;
-webkit-box-shadow: 5px 5px 10px #444;
background: #55aaee;
/* linear-gradient */
background: -moz-linear-gradient(top, #55aaee, #003366);
background: -webkit-gradient(linear, left top, left bottom, from(#55aaee), to(#003366));
}

#content #menu_h3 li.nav1 a:hover {
box-shadow: inset 5px 5px 10px #444;
-moz-box-shadow: inset 5px 5px 10px #444;
-webkit-box-shadow: inset 5px 5px 10px #444;
background: #003366;
background: -moz-linear-gradient(top, #003366, #55aaee);
background: -webkit-gradient(linear, left top, left bottom, from(#003366), to(#55aaee));
/* opacity */
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
filter:alpha(opacity=40);
-moz-opacity:0.40;
-khtml-opacity:0.4;
}

The css above uses the opacity to create a 0.8 opaque value on the menu button in the a:hover section.

Notes on the future

I think the above is enough to show that menus can quite easily be constructed without the need for images. Hopefully in 2011 when css3 is released and IE9 is around and standards compliant, all the above long winded ways of doing this, will be reduced to this :

border-radius: 11px;
box-shadow: 5px 5px 10px #444;
linear-gradient(top, #55aaee, #003366);
opacity:0.8;

If you want to support the older browsers, you'll have to keep supplying the extra css unfortunately.

So perhaps in five years time all browsers will work with the above css. By then of course there will be a host of extra goodies that will have been invented, with a host of extra hacks to achieve them.

/* the animated flying pig declaration */
flying-pig: radial;
-webkit-flying-pig: radial;
-moz-flying-pig: radial;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Flying-Pig=radii)";
-chrome-flying-donkey(we-own-the-www-now-we-call-it-what-we-want): circle;
-khtml-flying-pig: radial;

And so it goes on ...