Building Collapsible Navigation Bars with the Prototype Library
(Page 1 of 4 )
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.
Introduction
Developing a basic navigation bar for a web site is a pretty simple process that can be tackled even by inexperienced designers. Most of the time, this procedure only requires grouping links into an HTML list, and then spicing them up with a few CSS styles. That's it; mission accomplished!
Nonetheless, things can be a bit more complicated when it’s necessary to build a navigation mechanism that must have some kind of dynamic behavior. For instance, say that you want to create a links bar on top of a web page, and give users the possibility of hiding and revealing it alternately. In this case, creating a small JavaScript application that turns this navigation bar on and off may be an adequate solution, but this may restrict its overall accessibility.
Fortunately, there are alternatives when it comes to building a dynamic navigation bar like the one described above. It is perfectly possible to create it by using a proper combination of JavaScript and CSS. Best of all, it’ll remain completely functional even if scripting is disabled on the browser.
Of course, if you read the first article of this series, you're already pretty familiar with constructing a web-based navigation mechanism that can be hidden and displayed alternately by means of a simple switcher. I gave you the full details on how to perform this process in that tutorial.
However, you should recall that the JavaScript application that I developed in the previous chapter, while aimed at turning a static navigation bar into a dynamic user interface, was pretty basic. It lacked an important feature: it can’t be easily expanded.
Therefore, taking this limitation into account, in this second tutorial I’m going to teach you how to build a similar navigation system, this time by using the functionality of Prototype, the popular JavaScript library. In doing so, not only will the whole source code of this dynamic navigational bar look much more modular and compact, but it’ll support the incorporation of different animation effects.
That being said, to learn more about how this will be accomplished, start reading!
Next: Building a sample web page >>
More JavaScript Articles
More By Alejandro Gervasio
