Finishing a Collapsible Navigation Bar with CSS and JavaScript

Now that you know what this series is about, let me go straight to the point and remind you of the concepts deployed in the preceding article. In that particular tutorial I explained how to construct a useful navigation mechanism for a web site, which could be easily hidden from users by way of a neat scrolling effect.

In this specific case, the scrolling was performed by means of a simple JavaScript method bundled with the Scriptaculous DHTML framework. This method is very useful when it comes to animating different elements of a web page.

Well, at this point you’re pretty familiar with building a scrollable navigation bar like the one developed in the previous article of the series. However, there’s an additional issue that needs to be addressed regarding the way that this navigation bar works. If you test the navigation bar in its current state, you’ll see that its links don't scroll with it. They remain static across the entire scrolling process, which looks rather unprofessional.

Thus, in this last installment of the series I’m going to show you how to fix this small bug, thus completing the development of this scrollable navigational bar.

With the preliminaries out of our way, it’s time to tackle the final episode of this educational journey. Let’s get going!