Building a Dynamic Menu with CSS and JavaScript, part 1 - The dynamic factor
(Page 3 of 4 )
As I stated at the beginning of this article, the objective is to build a dynamic menu that identifies the active page, and highlights the corresponding link, visually indicating to the user what page he/she is currently visiting. To do that, I’ll use the above static menu as the base structure, adding the dynamic capabilities with JavaScript.
What’s more, since the menu might be quickly implemented in several Web projects, I’m going to encapsulate the whole code as a new JavaScript object, sacrificing a bit more of computing client resources, but gaining in maintenance and reusability. Sounds good, right? Let’s get a little more dynamic and build up the menu.
First, let’s see the full code for the CSS rules, which strongly relies on the previous static example. The listing is the following:
<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;
}
a.activebutton:link,a.activebutton:visited {
float: left;
display: block;
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
text-decoration: none;
background: #fff url("bgact.gif") repeat-x center left;
width: 80px;
padding: 10px 0px 9px 10px;
}
a.activebutton:hover {
float: left;
display: block;
font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
color: #fff;
text-align: center;
text-decoration: none;
background: #fff url("bgact.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;
}
h1 {
clear: left;
}
</style>
If you take a look at the above CSS rules, you’ll probably realize that they're pretty similar to those used with the first example. As you can appreciate, I’ve kept the original "regbutton", "leftcorner" and "rightcorner" classes, to give the same look to the menu. The only significant difference resides in the additional "activebutton" pseudo class, which is defined to be applied to the link corresponding to the active page, displaying it differently from the other links.
In order to highlight the active button, I’ve used the "bgact.gif" background image that is similarly tiled horizontally, changing the original button color to an orange version. In this way it indicates that the link corresponds to the active page. As usual, feel free to pick up any background image that you think is convenient for achieving the visual effect. It’s also perfectly possible to get rid of all of the images and vary only background and font colors. Just grasp that inspirational moment and choose the best model for your personal preferences.
Finally, I’ve styled a <h1> header tag, for clearing any element rendered after the menu itself. This is only to be used in the example. If you’re going to use the menu in your own applications, just add the styles that you really need.
At this point, I think that the CSS styles have been easily established to give you a good understanding. Now, let’s take a deep breath and remember the concept proposed before: building a dynamic menu that is completely defined as a new JavaScript object. What are we waiting for? Let’s make JavaScript work for us!
Next: The "menu" JavaScript object >>
More JavaScript Articles
More By Alejandro Gervasio
/ 39 
