JAVASCRIPT

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

Poor Best

Rating:

/ 4

June 27, 2007

TABLE OF CONTENTS:

As stated in the prior section, the last step that I'm going to take in this tutorial will consist of listing the signatures corresponding to the hypothetical "Products," "Services" and "Contact" web pages. In this way you will be able to see more clearly how the pertinent dynamic navigation bar behaves in each case.

Besides, the definition of each web page will be accompanied by a screen shot show you more completely the implementation of each example.

That being said, here are the signatures for the aforementioned web pages. Have a look at them, please:

(definition for products.php file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of dynamic navigation bar - Products page</title>
<style type="text/css">
body{
   padding: 0;
   margin: 0;
   background: #fff;
}

h1{
   font: bold 20px Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;
}

#navbar{
   width: 770px;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   background: #9cf;
}

#navbar ul{
   list-style: none;
   padding: 0;
   margin: 0;
}

#navbar li{
display: inline;
}

#navbar a,#navbar a:visited{
   padding: 10px;
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   color: #000;
   text-decoration: none;
}

#navbar a:hover,#navbar a:active,#navbar a:focus{
background: #fc0;
}

.activemenu{
   background: #fc0;
}
</style>
<script language="javascript">
function activateMenu(){
   var navbar=document.getElementById('navbar');
   if(!navbar){return};
   var links=navbar.getElementsByTagName('a');
   if(!links){return};
   for(var i=0;i<links.length;i++){
     if(links[i].getAttribute('href').indexOf
(window.location.href.split('//')[1].split('/')[2])!=-1){
       links[i].className='activemenu';
     }
   }
}
window.onload=function(){
   if(document.getElementById
      &&document.getElementsByTagName&&document.createTextNode){
   activateMenu();
   }
}
</script>
</head>
<body>
<h1>Products</h1>
<div id="navbar">
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About us</a></li>
      <li><a href="products.php">Products</a></li>
      <li><a href="services.php">Services</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
</div>
</body>
</html>

(definition for services.php file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of dynamic navigation bar - Services page</title>
<style type="text/css">
body{
   padding: 0;
   margin: 0;
   background: #fff;
}

h1{
   font: bold 20px Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;
}

#navbar{
   width: 770px;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   background: #9cf;
}

#navbar ul{
   list-style: none;
   padding: 0;
   margin: 0;
}

#navbar li{
display: inline;
}

#navbar a,#navbar a:visited{
   padding: 10px;
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   color: #000;
   text-decoration: none;
}

#navbar a:hover,#navbar a:active,#navbar a:focus{
background: #fc0;
}

.activemenu{
   background: #fc0;
}
</style>
<script language="javascript">
function activateMenu(){
   var navbar=document.getElementById('navbar');
   if(!navbar){return};
   var links=navbar.getElementsByTagName('a');
   if(!links){return};
   for(var i=0;i<links.length;i++){
     if(links[i].getAttribute('href').indexOf
(window.location.href.split('//')[1].split('/')[2])!=-1){
       links[i].className='activemenu';
     }
   }
}
window.onload=function(){
   if(document.getElementById
      &&document.getElementsByTagName&&document.createTextNode){
     activateMenu();
   }
}
</script>
</head>
<body>
<h1>Services</h1>
<div id="navbar">
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About us</a></li>
      <li><a href="products.php">Products</a></li>
      <li><a href="services.php">Services</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
</div>
</body>
</html>

(definition for contact.php file)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1" />
<title>Example of dynamic navigation bar - Contact page</title>
<style type="text/css">
body{
   padding: 0;
   margin: 0;
   background: #fff;
}

h1{
   font: bold 20px Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;
}

#navbar{
   width: 770px;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   background: #9cf;
}

#navbar ul{
   list-style: none;
   padding: 0;
   margin: 0;
}

#navbar li{
display: inline;
}

#navbar a,#navbar a:visited{
   padding: 10px;
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   color: #000;
   text-decoration: none;
}

#navbar a:hover,#navbar a:active,#navbar a:focus{
background: #fc0;
}

.activemenu{
   background: #fc0;
}
</style>
<script language="javascript">
function activateMenu(){
   var navbar=document.getElementById('navbar');
   if(!navbar){return};
   var links=navbar.getElementsByTagName('a');
   if(!links){return};
   for(var i=0;i<links.length;i++){
     if(links[i].getAttribute('href').indexOf
(window.location.href.split('//')[1].split('/')[2])!=-1){
       links[i].className='activemenu';
     }
   }
}
window.onload=function(){
   if(document.getElementById
      &&document.getElementsByTagName&&document.createTextNode){
     activateMenu();
   }
}
</script>
</head>
<body>
<h1>Contact</h1>
<div id="navbar">
    <ul>
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About us</a></li>
      <li><a href="products.php">Products</a></li>
      <li><a href="services.php">Services</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
</div>
</body>
</html>

All right, after studying in detail the signatures corresponding to the above web pages, certainly you won't have major problems understanding how the navigation bar works. Again, I'd like to point out here that the purpose of this article isn't to demonstrate how to build a simple navigation bar, since it's a very basic topic. Instead, I'd like you to grasp the concept that surrounds the creation of JavaScript applications that degrade gracefully when scripting has been deactivated on the browser.

Final thoughts

That's all for now. In this second tutorial of the series you learned how to extend the existing functionality of a basic navigation bar belonging to a fictional web site, via JavaScript, but without relying on this client-side scripting language to make it work properly.

However, this educational journey hasn't finished yet, since in the last part of the series I'm going to show you how to pull some records from a MySQL database by using AJAX. But, the most interesting aspect in building this web application will be based upon its ability to display the records in question even if JavaScript has been disabled.

Now that you've been warned, you won't want to miss it!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.