Home arrow JavaScript arrow Collapsible Navigation Bars with CSS and JavaScript

Collapsible Navigation Bars with CSS and JavaScript

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.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 7
September 21, 2009
  1. · Collapsible Navigation Bars with CSS and JavaScript
  2. · Start building a dynamic navigation bar
  3. · Adding behavior to the previous navigation bar
  4. · The complete source code for the dynamic navigation bar

print this article

Collapsible Navigation Bars with CSS and JavaScript
(Page 1 of 4 )


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!

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials