Collapsible Navigation Bars with CSS and JavaScript
(Page 1 of 4 )
In this first part of a four-part series, I will show you how to build a dynamic navigation bar that can be turned on and off by means of a simple switcher. This small web application will combine some JavaScript code, a few CSS styles and basic markup.
Introduction
When it comes to building eye-catching navigation bars for modern web sites, you know that there's a huge variety of approaches out there that can be used with relative ease. These range from purist solutions that only combine basic markup and a few CSS styles, to more complex methodologies, such as the ones that mix JavaScript, Ajax and Flash.
While each of these approaches has its own pros and cons, there's a crucial point that must be taken into account when you choose a particular solution: a navigation bar must look professional, yet be accessible to most users. As you may guess, it'd be rather pointless to build such a navigation system by using the JScript functions and proprietary filters supported only by Internet Explorer, when visitors using other browsers won't be able to utilize them.
However, it's perfectly possible to create navigation bars that take the best of each world: on the one hand they can be provided with a solid appearance and different dynamic behaviors, while on the other hand they can be easily accessed by most visitors.
Does this sound like a utopia? It isn't, actually. To demonstrate the veracity of these concepts, in this group of articles I'm going to walk you through building a basic, yet efficient, web-based navigation bar which can be hidden and displayed alternately on a web page. I will use only a combination of simple JavaScript code, CSS styles and structural markup.
Nonetheless, I'd like to stress again an important point here: this navigation bar will have dynamic behavior, but if scripting is disabled in the browser, it will remain completely functional.
In this first episode of the series, I'm going to teach you how to develop such a navigation mechanism by means of a pretty simple JavaScript application. This is a work in progress, though, so in upcoming tutorials, I'm going to show you how to get the same (or even better) results with the assistance of the Prototype JavaScript library.
Now that you know what to expect from this introductory article, let's learn together how to build a dynamic navigation bar with JavaScript and CSS. Let's begin now!
Next: Start building a dynamic navigation bar >>
More JavaScript Articles
More By Alejandro Gervasio
