Building a Dynamic Menu with CSS and JavaScript, part 1

In the ever-growing world of the Web, dynamic sites have found a well established position that expands design possibilities and makes maintenance and updating tasks a relatively painless experience. The maintenance of an equilibrium between server-side and client-side technologies is a fundamental concept for offering a professional, well-polished site to visitors who are always looking for new content and elegant visual presentation. Particularly, in the current client-side arena, one of the most used tools to spice up websites a little more is the implementation of dynamic drop-down/pull-down menus, facilitating the overall navigation process to users.

Certainly we might go deeper into the subject of client-side dynamic menus and explore some of the underlying techniques for building complex menu structures. However, sometimes there is no need to get so technical for building dynamic menus. That’s our trusted bet for this article series. We’re going to build a dynamic navigation menu that will identify the active page, and accordingly display the link differently from the others, making it easier for the user to navigate through the site. Hopefully the techniques used will serve as an introduction for working with user-defined objects in JavaScript and their correct implementation in Web pages. Just keep reading to give that dynamic touch to your site!

The migrating process: from static to dynamic

In order to establish a starting point for building the dynamic menu, let’s first create a conventional static navigation system, using pure CSS and HTML markup, which might nicely suit the navigational needs for quite simple websites. I’ve chosen to give the menu a rather temperate look, using only three small background images, but surely you’ll want to change this to satisfy your personal taste. Since one picture is worth a thousand words, here’s the initial appearance for the static menu:

Not too bad, eh? As you can see, the navigation menu is really simple, but appealing enough to be easily implemented on Web documents. Since I’ll be progressively building the dynamic menu, this is the way it will look, for instance, when the user is located at the "about us" page:

Before we go deeper into the always-uncertain territory of code, as mentioned previously, I’ve used three background images for the menu. The first one I’ve created is used for the menu’s left corner and is depicted below:

Next, I’ve generated the second background image to give the beveled appearance of the menu. Its dimensions are 1px wide and 32px high. It’s really small, but I'll show it anyway, so you get the idea of how it works for achieving the visual effect. Here it is:

Finally, the remaining background image is used to create the right corner of the menu, in a similar way to what I did with the left corner. Here’s the corresponding image:

Well, now that I’ve shown the background images to be used in the navigation menu, I guess you’ve grasped the general idea of how the images will be employed to build the menu's appearance. It’s time to take a look at the corresponding code.