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:

<!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 - About us 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>About us</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>

Naturally, as you might have guessed, the signature of the above PHP file is nearly identical to that of the "index.php" file that you learned previously, except that the respective navigation bar would look like this:

So far, so good right? At this point you hopefully learned how to create a simple JavaScript application for adding a neat dynamic touch to a text-based navigation bar, which can also degrade silently when scripting has been disabled on the browser.

So what is the next step? Well, simply in the section to come I'm going to show you the signatures corresponding to the rest of the web pages that comprise this fictional web site, so you can see in detail the dynamic behavior exposed by the respective navigation bar when a user visits the different pages.

Click on the link below and keep reading.

Next: Extending the implementation of the JavaScript-based navigation bar >>