Building a Dynamic Menu with CSS and JavaScript, part 1 - Coding the menu: CSS and HTML into action
(Page 2 of 4 )
Let’s see the underlying code behind the sample menu. First, here are the CSS declarations:
<style type="text/css">
a.regbutton:link,a.regbutton:visited {
float: left;
display: block;
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
text-decoration: none;
background: #fff url("bg.gif") repeat-x center left;
width: 80px;
padding: 10px 0px 9px 10px;
}
a.regbutton:hover {
float: left;
display: block;
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
text-decoration: none;
background: #fff url("bg.gif") repeat-x center left;
width: 80px;
padding: 10px 0px 9px 10px;
}
.leftcorner {
float: left;
background: #fff url("lc.gif") no-repeat center center;
width: 10px;
padding-top: 8px;
padding-bottom: 5px;
}
.rightcorner {
float: left;
background: #fff url("rc.gif") no-repeat center center;
width: 10px;
padding-top: 8px;
padding-bottom: 5px;
}
#dynmenu {
padding: 0px;
}
</style>
That’s a quite lengthy CSS listing to be analyzed. In fact, it’s not complicated at all, as you’ll see in a moment. I’ve just defined the classes for styling each link present in the menu, as well as the left and right corners respectively. Doing so, I’ve created the "regbutton" class, to give a button appearance to each one of the links. Please note that I’ve specified the tiny "bg.gif" background image to be horizontally tiled across the button itself, achieving the consistent look.
Then, I’ve declared the "leftcorner" and "rightcorner" classes, obviously for displaying the left and right menu corners. Finally, the "dynmenu" selector is defined, for styling the main menu container within the markup. I'm sure you’ll agree that all of this code is pretty self-explanatory.
Now, it’s time for the HTML markup listing:
<div id="dynmenu">
<span class="leftcorner"> </span>
<a href="#" class="regbutton" title="About Us">About Us</a>
<a href="#" class="regbutton" title="Products">Products</a>
<a href="#" class="regbutton" title="Services">Services</a>
<a href="#" class="regbutton" title="Links">Links</a>
<a href="#" class="regbutton" title="Contact">Contact</a>
<span class="rightcorner"> </span>
</div>
As you can see, the above HTML is very clear. The only tricky parts correspond to the left and right corners. I’ve used the powerful and versatile <span> tag to create the corner effects, with no structural value. There are lots of different ways to achieve this kind of visual effect, using <div> elements, but I’ve decided to keep it that way for simplicity.
Let’s congratulate ourselves! With a few lines of code, we have a fully functional navigation menu that will work in most browsers. Here’s the full code for the recently developed static menu:
<html>
<head>
<title>STATIC MENU</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
a.regbutton:link,a.regbutton:visited {
float: left;
display: block;
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
text-decoration: none;
background: #fff url("bg.gif") repeat-x center left;
width: 80px;
padding: 10px 0px 9px 10px;
}
a.regbutton:hover {
float: left;
display: block;
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
text-decoration: none;
background: #fff url("bg.gif") repeat-x center left;
width: 80px;
padding: 10px 0px 9px 10px;
}
.leftcorner {
float: left;
background: #fff url("lc.gif") no-repeat center center;
width: 10px;
padding-top: 8px;
padding-bottom: 5px;
}
.rightcorner {
float: left;
background: #fff url("rc.gif") no-repeat center center;
width: 10px;
padding-top: 8px;
padding-bottom: 5px;
}
#dynmenu {
padding: 0px;
}
</style>
</head>
<body>
<div id="dynmenu">
<span class="leftcorner"> </span>
<a href="#" class="regbutton" title="About Us">About Us</a>
<a href="#" class="regbutton" title="Products">Products</a>
<a href="#" class="regbutton" title="Services">Services</a>
<a href="#" class="regbutton" title="Links">Links</a>
<a href="#" class="regbutton" title="Contact">Contact</a>
<span class="rightcorner"> </span>
</div>
</body>
</html>
Note that I’ve coded some dead links for the menu. This seems to be a little obvious, but if you’re going to use the example, don’t forget to replace them with the corresponding URL values for your site.
So far, so good, the menu is working and everything is fine. But did I mention the word "dynamic” in the above lines? Where is the dynamic menu? Keep reading.
Next: The dynamic factor >>
More JavaScript Articles
More By Alejandro Gervasio
/ 42 
