Home arrow JavaScript arrow Making a Dynamic Navigation Bar in JavaScript Degrade Gracefully

Making a Dynamic Navigation Bar in JavaScript Degrade Gracefully

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.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 12
June 27, 2007
  1. · Making a Dynamic Navigation Bar in JavaScript Degrade Gracefully
  2. · Creating a simple navigation bar
  3. · An example: a fictional web page
  4. · Extending the implementation of the JavaScript-based navigation bar

print this article

Making a Dynamic Navigation Bar in JavaScript Degrade Gracefully
(Page 1 of 4 )


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! 

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