Home arrow JavaScript arrow Controllable Navigation Bars with JavaScript, Part 1

Controllable Navigation Bars with JavaScript, Part 1

Navigation bars that can be alternately displayed and hidden allow visitors to your website to read page contents more easily. Alejandro Gervasio explains how to set these up using HTML and JavaScript.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 8
March 21, 2005
  1. · Controllable Navigation Bars with JavaScript, Part 1
  2. · Building core functionality
  3. · The JavaScript"switchBar()"function
  4. · Complete code listing and background images

print this article

Controllable Navigation Bars with JavaScript, Part 1
(Page 1 of 4 )




Just a few years ago, Web developers used nested-table techniques to make Web pages look consistent across the two major browsers, with little or no interactivity present in the whole surfing experience. The modern Web is completely different, where designers are constantly adding more complex functionality to websites, trying to incorporate some interesting and useful features that were already present in software applications for many years. Nowadays, we see sophisticated drop-down menus, image galleries, tree-navigation systems and so on playing an important role in a siteís whole interactivity. And the progress is certainly endless.


One nice feature often implemented on many sites is the presence of side navigation bars that are completely controllable in terms of visibility. This approach allows users to alternately hide and show sidebars. Visitors can thus expand the visible area occupied by the main content, and read page information more clearly and efficiently. If we think about it, this functionality has been present for long time in common software programs.


With this concept in mind, itís time to show some action. In the first part of this series, Iíll present a pretty straightforward way to add a controllable sidebar to any Web page, using simple HTML markup and a little help from JavaScript. The script itself will be portable enough to be included in existing projects with minor modifications. There is code ahead waiting for us. Letís move forward to find out more.


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