Making a Dynamic Navigation Bar in JavaScript Degrade Gracefully - An example: a fictional web page
(Page 3 of 4 )
All right, now that you've seen how the "index.php" file looks, let me go one step further and show you the signature of a fictional "About us" web page. Its corresponding definition is as follows:
(definition for about.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 - 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 >>
More JavaScript Articles
More By Alejandro Gervasio
