HTML5/CSS3 Tutorial: Building a Navigation Menu Without Images.

Tags:  HTML5 CSS3 Tutorial How-to Menu Navigation 

This tutorial will show you how to build beautiful looking menus with CSS3 and HTML5. No images required.

Recommended Resources

HTML5 basics
CSS3 basics

Overview.

This tutorial will explore navigation menu creation with HTML5 and CSS3 with 5 simple examples. I will show you how easy it can be to produce a wide variety of menu experiences through basic CSS3 attributes. Please note that the browser renderings of the below examples should be viewed in a CSS3 compatible browser.

All 5 of the following examples will explore these CSS3 attributes:

/* background gradient */
background: -moz-linear-gradient(<direction>, <start color>, <end color>);
background: -webkit-gradient(<type>, <start loc>, <end loc>, <start color>, <end color>);

/* rounded corners */
-moz-border-radius: <radius>;
border-radius: <radius>;

/* inner/outer */
-moz-box-shadow: <y-offset> <x-offset> <blur radius> <spread radius> <color>;
-webkit-box-shadow: <y-offset> <x-offset> <blur radius> <spread radius> <color>;
box-shadow: <y-offset> <x-offset> <blur radius> <spread radius> <color>;

To dive right into the source code without reading further, download the source zip.

Basic Setup.

All of the below examples follow the same basic setup.

Here's the HTML for all the examples:

<!-- Navigation Item Block -->
<div class = 'navItemBlock'>

<!-- Navigation Item -->
<div class = 'navItem navItemSelected'>
<table><tr><td height = '30px'></td><td><span>Home</span></td></tr></table>
</div>

<!-- Navigation Item -->
<div class = 'navItem'>
<table><tr><td height = '30px'></td><td><span>About</span></td></tr></table>
</div>

<!-- Navigation Item -->
<div class = 'navItem'>
<table><tr><td height = '30px'></td><td><span>Contact</span></td></tr></table>
</div>

</div>

and some css for cross browser text alignment:

div.navItem table, div.navItemFirst table, div.navItemLast table {
width: 100%;
text-align: center;
}

div.navItem td, div.navItemFirst td, div.navItemLast td {
vertical-align: middle;
}

The below examples include the CSS code and browser rendered result. To view these examples, please use a web browser that is CSS3 compatible.

Example 1.

In this example I included some gradients, some inner/outer shadows and rounded corners.

Below is the CSS specific to this example.

div.navItemBlock1 {
width: 420px;
height: 40px;
padding: 0 0 0 5px;
margin: 0 0 0 0;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, top top, bottom bottom, #fff, #ddd);
border: 1px solid #999;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 0 2px 0 #000;
-webkit-box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 2px 0 #000;
}

div.navItemBlock1 div.navItem {
float: left;
width: 98px;
height: 28px;
margin: 5px 5px 0 0;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #999;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, top top, bottom bottom, #fff, #ddd);
color: #333;
cursor: pointer;
}

div.navItemBlock1 div.navItem:hover {
border: 1px solid #666;
}

div.navItemBlock1 div.navItem:active {
border: 1px solid #666;
-moz-box-shadow: inset 0 0px 2px 0 #000;
-webkit-box-shadow: inset 0 0 2px 0 #000;
box-shadow: inset 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
}

div.navItemBlock1 div.navItemSelected {
border: 1px solid #666;
-moz-box-shadow: inset 0 0px 2px 0 #000;
-webkit-box-shadow: inset 0 0 2px 0 #000;
box-shadow: inset 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
}

div.navItemBlock1 div.navItem span {
font-family: "Lucida Grande";
font-size: 12px;
text-align: center;
text-shadow: 0 1px 1px #fff;
}

Example 2.

Again, here we see some slightly more rounded corners.

Below is the CSS specific to this example.

div.navItemBlock2 {
width: 420px;
height: 40px;
padding: 0 0 0 5px;
margin: 0 0 0 0;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, top top, bottom bottom, #fff, #ddd);
border: 1px solid #999;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 0 2px 0 #000;
-webkit-box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 2px 0 #000;
}

div.navItemBlock2 div.navItem {
float: left;
width: 98px;
height: 28px;
margin: 5px 5px 0 0;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #999;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-gradient(linear, top top, bottom bottom, #fff, #ddd);
color: #333;
cursor: pointer;
}

div.navItemBlock2 div.navItem:hover {
border: 1px solid #666;
}

div.navItemBlock2 div.navItem:active {
border: 1px solid #666;
-moz-box-shadow: inset 0 0px 2px 0 #000;
-webkit-box-shadow: inset 0 0 2px 0 #000;
box-shadow: inset 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
}

div.navItemBlock2 div.navItemSelected {
border: 1px solid #666;
-moz-box-shadow: inset 0 0px 2px 0 #000;
-webkit-box-shadow: inset 0 0 2px 0 #000;
box-shadow: inset 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
}

div.navItemBlock2 div.navItem span {
font-family: "Lucida Grande";
font-size: 12px;
text-align: center;
text-shadow: 0 1px 1px #fff;
}

Example 3.

In this example we explore rounded buttons that really pop! I also used the text-shadow property to make the text look embossed.

Below is the CSS specific to this example.

div.navItemBlock3 {
width: 420px;
height: 40px;
padding: 0 0 0 5px;
margin: 0 0 0 0;
background: -moz-linear-gradient(top, #aaa, #666);
background: -webkit-gradient(linear, top top, bottom bottom, #aaa, #666);
border: 1px solid #666;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 0 2px 0 #000;
-webkit-box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 2px 0 #000;
}

div.navItemBlock3 div.navItem {
float: left;
width: 98px;
height: 28px;
margin: 5px 5px 0 0;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 0 0 1px 0 #333;
-webkit-box-shadow: 0 0 1px 0 #333;
box-shadow: 0 0 1px 0 #333;
border: 1px solid #333;
background: -moz-linear-gradient(top, #ddd, #aaa);
background: -webkit-gradient(linear, top top, bottom bottom, #ddd, #aaa);
color: #333;
cursor: pointer;
}

div.navItemBlock3 div.navItem:active {
border: 1px solid #333;
-moz-box-shadow: inset 0 0 2px 0 #000;
-webkit-box-shadow: inset 0 0 2px 0 #000;
box-shadow: inset 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
}

div.navItemBlock3 div.navItem:hover {
border: 1px solid #000;
}

div.navItemBlock3 div.navItemSelected {
border: 1px solid #333;
-moz-box-shadow: inset 0 0 2px 0 #000;
-webkit-box-shadow: inset 0 0 2px 0 #000;
box-shadow: inset 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
}

div.navItemBlock3 div.navItem span {
font-family: "Lucida Grande";
font-size: 12px;
text-align: center;
text-shadow: 0 1px 1px #fff;
}

Example 4.

This one is similar to example 3, but the buttons pop out on roll over.

Below is the CSS specific to this example.

div.navItemBlock4 {
width: 420px;
height: 40px;
padding: 0 0 0 5px;
margin: 0 0 0 0;
background: -moz-linear-gradient(top, #ddd, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ddd, #999);
border: 1px solid #666;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 0 0 2px 0 #000;
-webkit-box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 2px 0 #000;
}

div.navItemBlock4 div.navItem {
float: left;
width: 98px;
height: 28px;
margin: 6px 6px 0 1px;
-moz-border-radius: 15px;
border-radius: 15px;
color: #333;
cursor: pointer;
}

div.navItemBlock4 div.navItem:hover {
border: 1px solid #333;
-moz-box-shadow: 0 0 2px 0 #000;
-webkit-box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
margin: 5px 5px 0 0;
}

div.navItemBlock4 div.navItem:active {
border: 1px solid #333;
-moz-box-shadow: 0 0 2px 0 #000;
-webkit-box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
margin: 5px 5px 0 0;
}

div.navItemBlock4 div.navItemSelected {
border: 1px solid #333;
-moz-box-shadow: 0 0 2px 0 #000;
-webkit-box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 2px 0 #000;
background: -moz-linear-gradient(top, #ccc, #999);
background: -webkit-gradient(linear, top top, bottom bottom, #ccc, #999);
color: #333;
margin: 5px 5px 0 0;
}

div.navItemBlock4 div.navItem span {
font-family: "Lucida Grande";
font-size: 12px;
text-align: center;
text-shadow: 0 1px 1px #fff;
}

Example 5.

Last but not least, the final menu! This one is a little more involved because it has a lighting effect.

Here I used the standard menu HTML but included a <div> of class lighting within each navigation item.

<div class = 'navItem'>
<div class = 'lighting'></div>
<table><tr><td height = '40px'></td><td><span>Contact</span></td></tr></table>
</div>

For the lighting, I used a half circle is hidden below the menu with a wide, light yellow shadow.

Below is the CSS specific to this example.

div.navItemBlock5 {
width: 400px;
height: 40px;
padding: 0 0 0 0;
margin: 0 0 0 0;
background: -moz-linear-gradient(top, #aff, #9cc);
background: -webkit-gradient(linear, top top, bottom bottom, #aff, #9cc);
border: 1px solid #666;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
-moz-box-shadow: 0 0 2px 0 #000;
-webkit-box-shadow: 0 0 2px 0 #000;
box-shadow: 0 0 2px 0 #000;
}

div.navItemBlock5 div.navItemFirst {
float: left;
width: 98px;
height: 40px;
margin: 0 0 0 0;
padding: 0 0 0 0;
color: #333;
cursor: pointer;
border-left: 1px solid #cff;
border-right: 1px solid #699;
-moz-border-radius: 20px 0 0 0;
border-radius: 20px 0 0 0;
}

div.navItemBlock5 div.navItem {
float: left;
width: 98px;
height: 40px;
margin: 0 0 0 0;
color: #333;
cursor: pointer;
border-left: 1px solid #cff;
border-right: 1px solid #699;
}

div.navItemBlock5 div.navItemLast {
float: left;
width: 98px;
height: 40px;
margin: 0 0 0 0;
padding: 0 0 0 0;
color: #333;
cursor: pointer;
border-left: 1px solid #cff;
border-right: 1px solid #699;
-moz-border-radius: 0 20px 0 0;
border-radius: 0 20px 0 0;
}

div.navItemBlock5 div.navItem:hover, div.navItemBlock5 div.navItemFirst:hover, div.navItemBlock5 div.navItemLast:hover {
-moz-box-shadow: inset 0 -1px 2px 0 #000;
-webkit-box-shadow: inset 0 -1px 2px 0 #000;
box-shadow: inset 0 -1px 2px 0 #000;
background: -moz-linear-gradient(top, #9dd, #699);
background: -webkit-gradient(linear, top top, bottom bottom, #9dd, #699);
overflow: hidden;
padding: 0 1px 0 1px;
border: 0px;
}

div.navItemBlock5 div.navItemSelected {
-moz-box-shadow: inset 0 -1px 2px 0 #000;
-webkit-box-shadow: inset 0 -1px 2px 0 #000;
box-shadow: inset 0 -1px 2px 0 #000;
background: -moz-linear-gradient(top, #9dd, #699);
background: -webkit-gradient(linear, top top, bottom bottom, #9dd, #699);
overflow: hidden;
padding: 0 1px 0 1px;
border: 0px;
}

div.navItemBlock5 div.navItemSelected div.lighting {
position: relative;
top: 40px;
left: 30px;
width: 40px;
height: 10px;
margin: 0 0 -10px 0;
background: #000;
-moz-border-radius: 20px 20px 0 0;
border-radius: 20px 20px 0 0;
-moz-box-shadow: 0 0 20px 5px #ffc;
-webkit-box-shadow: 0 0 20px 5px #ffc;
box-shadow: 0 0 20px 5px #ffc;
}

div.navItemBlock5 div.navItem span, div.navItemBlock5 div.navItemFirst span, div.navItemBlock5 div.navItemLast span {
font-family: "Lucida Grande";
font-size: 12px;
text-align: center;
text-shadow: 0 1px 1px #fff;
}

Conclusion.

In the short time that I was able to produce these examples, I was excited to see what CSS3 can really offer developers. Not having to create images for every corner, shadow and mouse event is a huge bonus. This will surely save a ton of development time for anyone who uses it.

Tutorial Downloads