Creating a Scrolling Navigation Bar Effect with CSS and JavaScript
Welcome to the third part of a four-part series that shows you how to build collapsible navigation bars with CSS and JavaScript. In this part, you'll learn how to combine the functionality of the Prototype and Scriptaculous libraries to construct a pretty useful scrolling navigational bar.
Creating a Scrolling Navigation Bar Effect with CSS and JavaScript - Building the dynamic navigation bar (Page 2 of 4 )
Before I show you how to change the way this navigational bar appears and disappears on a web page, I'm going to code its structural markup. Then I will proceed to add a scrolling effect to the bar.
Please look at the following (X)HTML file. It builds a web document that includes the aforementioned navigation bar, along with a few other common sections, such as a main area and a page footer:
<!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 static 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 depicted above, the previous (X)HTML file is very easy to follow. It first creates a navigation bar composed of a bunch of links grouped by a regular list, and then builds two additional sections, identified as “maincol” and “footer” respectively.
Also, you should notice that the previous file includes a “switcher” DIV. Obviously, each time this element is clicked, it’ll allow users to alternately enable and disable the navigation bar located on top of the web page.
But I’m getting ahead of myself. The details for how to perform this task using the Prototype and Scriptaculous JavaScript libraries will be discussed in the section to come.
JavaScript 
Finishing a Collapsible Navigation Bar with CSS and JavaScript
