Controllable Navigation Bars with JavaScript, Part 1

(Page 1 of 4 )

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.

 

Introduction

 

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.

 

Next: Building core functionality >>
 

More JavaScript Articles
More By Alejandro Gervasio

Comments On: Controllable Navigation Bars with JavaScript, Part 1

·  The approach explained in the article might be a good add-on for sites looking...    · Sorry about that; we had to do that to get the article to fit properly.    · Hi Terri,No problem about that :-). Thank you for the aclaration.    · of using that technique for almost 3 years on my site now (onlinetools.org), but I...    · Hello friend,Thank you for the comment. Definiltively, setting a cookie for...    · Yes, how would we be able to call the onclick function from another function? Or am...    · According to your comnents, I thik the best way to keep user preferences is using a...   >>> Post your comment now!