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:

According to the concepts deployed in the beginning, my intention here is to illustrate how the functionality of an existing element of a given web site can be improved via JavaScript, while still allowing that element to remain completely functional even if scripting has been disabled on the browser.

I'm going to create some basic PHP files which will display on top of the respective web page a conventional navigation bar. Then I'm going to attach to the mentioned web page a few simple JavaScript functions to turn the navigation bar into a dynamic element.

Here is the signature for the PHP file that displays a conventional home page:

(definition for index.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</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>
</head>
<body>
<h1>Home</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>

As you can see, the above PHP file basically displays a primitive web page, which includes a text-based navigation bar on top of the respective web document. Of course, the look and feel of the navigation bar in question can be seen more clearly in the screen shot below:

Logically, the navigation bar depicted above isn't anything special, since it doesn't differ too much from the ones that you've probably seen when surfing the web. Nevertheless, let me now show you the definition of a short JavaScript snippet that will be embedded into the web page that you saw before.

Given that, this simple JavaScript code looks like this:

As shown above, the previous JavaScript code is tasked simply with highlighting, on the navigation bar, the link that corresponds to the web page being currently visualized. Of course, there are many ways to achieve this effect with JavaScript, but I decided to use in this case, its popular "window.location" object.

Now that you learned how the previous JavaScript snippet works, let me show you the new signature of the same "index.php" file listed previously, this time including the snippet in question:

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>Home</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>

As you might have guessed, the above PHP file looks nearly the same after embedding into it the JavaScript code that you learned before. However, now the functionality of the corresponding navigation bar has been improved, since it's now capable of highlighting the link of the page that's being currently viewed.

This condition is clearly reflected by the screen shot below:

As you can see, now the navigation bar has a slightly more dynamic behavior. Nonetheless, the most important thing to note here with reference to the functionality exposed by the navigational bar in question is that it remains nearly the same, regardless of whether the JavaScript snippet that you saw before is working.

So, are you starting to grasp the concept behind building JavaScript applications that degrade gracefully? I bet you are!

Next: An example: a fictional web page >>