Collapsible Navigation Bars with CSS and JavaScript - The complete source code for the dynamic navigation bar
(Page 4 of 4 )
As I said in the section that you just read, in the lines below I listed the full source code that builds this dynamic navigation bar, including the corresponding markup, CSS styles and JavaScript functions:
<!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>
<title>Example on building a dynamic navigation bar</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h2{
margin: 0;
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#navbar{
padding: 10px;
background: #ffc;
}
#navbar ul{
list-style: none;
}
#navbar li{
display: inline;
padding-right: 4%;
}
#navbar a:link,#navbar a:visited{
font: normal 12px Arial, Helvetica, sans-serif;
color: #039;
text-decoration: none;
}
#navbar a:hover{
text-decoration: underline;
}
#maincol{
position: relative;
padding: 30px 10px 30px 10px;
background: #eee;
}
#footer{
padding: 10px;
background: #ffc;
}
.hidden{
display: none;
}
.switcher{
position: absolute;
top: 0;
left: 0;
width: 150px;
padding: 2px;
background: #999;
border: 1px solid #000;
text-align: center;
}
.switcher a:link,.switcher a:visited{
font: normal 12px Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.switcher a:hover{
color: #fc0;
}
</style>
<script language="javascript">
// hide navigation bar
function hideNavBar(){
var navbar=document.getElementById('navbar');
if(!navbar){return};
// assign 'hidden' CSS class to navbar
navbar.className='hidden';
}
// create navigation bar switcher
function createSwitcher(){
var maincol=document.getElementById('maincol');
if(!maincol){return};
// create switcher container
var div=document.createElement('div');
// create switcher link
var a=document.createElement('a');
a.setAttribute('href','#');
// create text of switcher
a.appendChild(document.createTextNode('Turn on/off navbar'));
div.appendChild(a);
// style switcher
div.className='switcher';
maincol.appendChild(div);
// activate navbar switcher
a.onclick=function(){
var navbar=document.getElementById('navbar');
// hide/display navigation bar when switcher is clicked on
navbar.className=navbar.className=='hidden'?'navbar':'hidden';
}
}
window.onload=function(){
if(document.getElementById&&document.getElementsByTagName&&document.
createElement){
// hide navigation bar when web page is loaded
hideNavBar();
// create navbar switcher and insert it into web page
createSwitcher();
}
}
</script>
</head>
<body>
<div id="navbar">
<h2>This is the navigation bar of the web page</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<div id="maincol">
<h2>This is the center column of the web page</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
<p>
</div>
<div id="footer">
<h2>This is the footer section of the web page</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>
</div>
</body>
</html>
In addition to examining the above code sample, you may want to look at the following images, which show the different states of the navigation bar, that is when turned off and on using the switcher. Here they are:
Now that you have at your disposal the complete source code corresponding to this dynamic navigation bar, you can copy it and paste it into your favorite code editor. This way, you'll be able to introduce your own improvements.
Final thoughts
In this first chapter of the series, I showed you how to build a dynamic navigation bar that can be turned on and off alternately by means of a simple switcher. As you saw earlier, this small web application combines some JavaScript code, a few CSS styles and basic markup.
In the next part, things will get more interesting, because I'm going to teach you how to develop a similar navigation bar using the functionality of the Prototype JavaScript library.
Don't miss the upcoming part!
| 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. |
