Creating a Scrolling Navigation Bar Effect with CSS and JavaScript

Building a static navigation bar with plain HTML is pretty easy. With a decent knowledge on the most common elements that can be included in a web document, any beginner can code a standard navigational mechanism. It's a two-step process: first, create a bunch of links, and then wrap them in a simple list. 

What if you want to go one step further and provide that navigation bar with a dynamic behavior -- without compromising its overall accessibility? That situation is a bit more complicated. Most of the time you’re going to add a specific behavior to the navigation bar with JavaScript, and this process, when not performed in an unobtrusive way, can turn your neatly-crafted bar into a pretty useless user interface.

So, is there any way to construct a dynamic web-based navigation system that can be accessible to most users? Of course there is! And if you start reading this article, you’ll be amazed about how simple this procedure can be actually. this article series walks you through the development of an effective navigational mechanism, which can be hidden and shown dynamically on a web page by means of a simple switcher.

Now that I've outlined what you should expect from this group of articles, let me remind you briefly of the topics that I discussed in the previous tutorial. In that article I demonstrated how to build a pretty basic web-based navigation bar, which could be easily removed from the web page via a simple link.

As you’ll probably recall, the removal and display of this navigational bar was completely delegated to a small JavaScript application developed through a combination of the Prototype and Scriptaculous libraries. It performed its assigned task in an unobtrusive manner.

However, if you test the navigation bar in its current state, you’ll see that it can be enabled or disabled alternately with a smooth fade transition effect. This looks pretty attractive. But, it’s possible to replace this transition with another one, and create a navigational bar that can be hidden and displayed via a scrolling effect.

Thus, in this third chapter of the series I’m going to show you how to construct the above-described navigation bar, also using the combined functionality of Prototype and Scriptaculous.

Are you ready to learn more on how this will be done? Jump ahead and begin reading!