Building Collapsible Navigation Bars with the Prototype Library
Welcome to the second part of a four-part series on creating collapsible navigation bars with CSS and JavaScript. In this installment, I explain how to create a simple navigation bar that can be hidden and displayed alternately. We'll use the Prototype and Scriptaculous JavaScript libraries to achieve this effect.
Building Collapsible Navigation Bars with the Prototype Library - Building a sample web page (Page 2 of 4 )
As someone said once, a long journey starts with a small step. Our very first step on this journey will consist of creating a static web page made up of three sections: the navigation bar, a main area, and the corresponding footer.
After constructing this static navigation system, I’m going to take advantage of the functionality of the Prototype JavaScript library to turn it into a user interface that can be hidden or shown via a simple switcher.
Having explained that, here’s the how this basic web page looks:
<!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>
<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">
<div id="switcher">Turn on/off navbar</div>
<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>
</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>
As shown before, the above web page includes a basic navigation bar in its upper section, which is comprised of a few links, grouped by an HTML list. So far, nothing unexpected, right? Also, you should notice that the web page in question will display a small DIV, identified as “switcher.”
As you may have guessed, the purpose of including this switcher is to provide users with a simple mechanism for turning the navigation bar on and off. But before I teach you how this task will be performed with JavaScript, let me show you how the above web page looks. Here is a screen shot:
Well, at this point the scenario has been properly set up to convert the previous static navigation bar into a dynamic interface. As I stated in the beginning, the behavior of the bar will be implemented through the popular Prototype JavaScript library. To see how this will be done, please click on the link that appears below and keep reading.
JavaScript 
Creating a Scrolling Navigation Bar Effect with CSS and JavaScript
