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 - The dynamic navigation bar’s full source code (Page 4 of 4 )
Undeniably, the best way to understand how the recently developed dynamic navigation bar functions is by showing its complete source code. Below I created a basic (X)HTML file which demonstrates how easy it is to animate a static navigation bar by way of the Prototype/Scriptaculous tandem.
Here’s the sample 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>
<title>Example on building a dynamic navigation bar with Scriptaculous’ Appear effect</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>
That’s all the source code that you need to build a dynamic navigation bar using Prototype and Scriptaculous. Of course, the way that this dynamic navigation bar functions will be better grasped if you look at the following screen shots. The first one shows what the page looks like when the bar is displayed, and the last one when it’s hidden:
With all of this source material at your complete disposal, now you can to test the previous dynamic navigation bar and enhance its current functionality.
Final thoughts
In this second chapter of the series, I explained how to create a simple navigation bar that can be hidden and displayed alternately by using the assistance of the Prototype and Scriptaculous JavaScript libraries.
In this case, I used the Scriptaculous “appear” built-in effect to turn the visibility of the navigational bar on and off, but as you know, this framework offers other animation effects that can be easily applied to any element of a web page.
Therefore, in the following article I’m going to show you how to incorporate a “fade” visual effect into the navigation bar that you saw earlier, thus enhancing its dynamic behavior.
Now that you’re well aware of the topics that will be discussed in the next tutorial, you won’t want to miss it!
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.
JavaScript 
Creating a Scrolling Navigation Bar Effect with CSS and JavaScript
