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.
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.