Finishing a Collapsible Navigation Bar with CSS and JavaScript

As I explained in the previous section, my plan consists essentially of animating the navigation bar that was coded before by way of a smooth scrolling effect. In simple words, each time a user clicks on the corresponding switcher, the bar will be removed and displayed alternately on the web page, and this process will be animated by scrolling. Pretty simple to understand, right?

However, in order to apply this scrolling effect to the navigation bar, I’m going to employ a brand new method bundled with the Scriptaculous library, called “blind.” This effect can scroll not only the selected web page element, but all of its additional contents.

Given that, here’s the short JavaScript snippet that performs the scroll animation:

// display/hide navigation bar

function toggleNavBar(){

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

}

// initialize navigation bar switcher

function initializeElement(){

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

}

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

As I said before, in this particular case I used the “blind” animation effect provided by Scriptaculous to scroll the corresponding navigation bar up and down, each time the switcher is clicked. Of course, the reason for utilizing this effect is that it’ll animate the navigational bar along with all of its sub elements.

So far, so good. At this stage, I already showed you how to use a few intuitive methods that come included with Prototype and Scriptaculous to make this navigational bar completely scrollable. Thus, assuming that you grasped the logic behind this process, it’s time to build a new (X)HTML file that includes the previous JavaScript code, along with the structural markup that you saw in the first section, thus completing the development of this scrollable bar.

The complete signature of the aforementioned (X)HTML file will be shown in the section to come, so click on the link below and keep reading.