Home arrow JavaScript arrow Building a Dynamic Menu with CSS and JavaScript, part 1

Building a Dynamic Menu with CSS and JavaScript, part 1

Dynamic menus that highlight the link where a website visitor is located can make site navigation a much more pleasant experience. In this article, the first in a series, we will cover the construction process of a dynamic menu, extensively using the DOM methods within user-defined JavaScript objects to help us learn how to build more complex structures.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 72
June 22, 2005
  1. · Building a Dynamic Menu with CSS and JavaScript, part 1
  2. · Coding the menu: CSS and HTML into action
  3. · The dynamic factor
  4. · The "menu" JavaScript object

print this article

Building a Dynamic Menu with CSS and JavaScript, part 1
(Page 1 of 4 )

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. 

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials