Building Collapsible Navigation Bars with the Prototype Library

Frankly speaking, turning the previous static navigation bar into a dynamic user interface is actually a straightforward process that can be performed with minor efforts, thanks to the functionality of the Prototype JavaScript library.

In this case, I’m going to use Prototype’s DHTML framework, called “Scriptaculous,” to make the navigation bar appear and disappear from the web page each time a user clicks on the switcher created in the previous section.

But how can this animation effect be achieved successfully? To answer that, please examine the following JavaScript code. It is responsible for hiding and displaying the navigation bar by means of the pertinent switcher:

// display/hide navigation bar using 'Appear' effect

function toggleNavBar(){

new Effect.toggle('navbar','appear');

}

// initialize navigation bar switcher

function initializeElement(){

Event.observe($('switcher'),'click',toggleNavBar,false);

}

Event.observe(window,'load',initializeElement,false);

That was really simple to code, wasn’t it? As you can see, the previous JavaScript snippet first uses an “appear” animation effect, included with the Scriptaculous DHTML framework, to turn the navigation bar on and off alternatively, and then utilizes the “$()” function to initialize the pertinent switcher after the web page has been loaded.

Naturally, the immediate result of working with the above client-side application is that the navigation bar can be hidden and displayed at will, via the corresponding switcher, by way of clean, unobtrusive JavaScript.

Okay, at this point I've shown you how to use a simple combination of the Prototype and Scriptaculous JavaScript libraries to animate the static navigation bar that you saw in the previous section.

However, if you’re like me, then you'll want to see how the full source code of this web application looks. In the final section of this article I’ll be listing it for you, along with a couple of additional screen captures.

As I said before, this will be done in the following section, so keep reading.