Making a Dynamic Navigation Bar in JavaScript Degrade Gracefully
(Page 1 of 4 )
The modern trend aimed at building highly interactive and visually appealing web sites can introduce undesirable effects, particularly in those cases where JavaScript is used erroneously to display relevant content to end users. Therefore, if you're interested in learning how to make your JavaScript applications degrade gracefully when scripting has been disabled in the client, then this series of articles might be what you're looking for.
Introduction
Welcome to the second installment of the series that began with "Making JavaScript Applications Degrade Gracefully." Made up of three approachable tutorials, this series shows you how to use JavaScript to expand the existing functionality of a given web application without turning it into a piece of software that depends on client-side scripting to work properly.
Stepping back for a moment to the topics covered in the preceding article of this series, you'll surely recall that in that tutorial particularly I explained how to build a simple online registration form which was comprised of a few text input fields. These fields are of course handy for entering useful data, such as the user's first and last names, the pertinent email address, and some additional comments. Besides, the web form was conceived originally to display a combination of two combo boxes, where the second one would be displayed on the browser only if a specific option was selected in the first one.
Logically, the implementation of this basic yet interactive online form was used only as an introductory approach to demonstrate how to build JavaScript applications that degrade gracefully in those cases where scripting has been disabled in the client. In this occasion in particular, the functionality provided by the aforementioned registration form would remain nearly the same, even if a user can't select the options available in the second combo box.
So far so good. Now that you hopefully recalled the concepts deployed in the previous tutorial of the series, it's a good time to leap forward and continue reviewing more real-world examples that surround the development of JavaScript code that expands the existing capacity of a specific web application, but at the same time, doesn't limit its functionality if client-side scripting is deactivated on the browser.
Speaking more concretely, in this second tutorial of the series, I'm going to demonstrate how to create a simple JavaScript application which can be used in conjunction with any conventional text-based navigation bar to indicate to the visitors of a hypothetical web site which page is currently active. Even though this example is actually rather primitive, it might be used as a starting point for developing more complex JavaScript applications that degrade gracefully, specifically in those situations where scripting has been disabled on the browser.
Having already introduced the subject of this tutorial, let's get started!
Next: Creating a simple navigation bar >>
More JavaScript Articles
More By Alejandro Gervasio
