Controllable Navigation Bars with JavaScript, Part 1

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.