Home arrow JavaScript arrow Page 4 - Controllable Navigation Bars with JavaScript, Part 1
JAVASCRIPT

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Controllable Navigation Bars with JavaScript, Part 1 - Complete code listing and background images
(Page 4 of 4 )

 

As I promised in the previous lines, hereís the complete code for the switcher bar:

 

<html>

<head>

<title>SWITCHER BAR</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="javascript">

switchBar=function(){

    var navbar,content,swbar;

    navbar=document.getElementById('navbar');

    if(!navbar){return;}

    content=document.getElementById('content');

    if(!content){return;}

    swbar=document.createElement('div');

    swbar.id='switchbar';

    swbar.title='hide navbar';

    content.parentNode.insertBefore(swbar,content);

    swbar.onclick=function(){

          if(navbar.style&&swbar.style){

               if(!navbar.style.display||
                      navbar.style.display=='block'){

                    navbar.style.display='none';

                    swbar.style.backgroundImage=
                     'url(tab_right.gif)';

                    swbar.title='show navbar';

               }

               else{

                    navbar.style.display='block';

                    swbar.style.backgroundImage=
                     'url(tab_left.gif)';

                    swbar.title='hide navbar';

               }

          }

    }

}

window.onload=function(){

    if(document.getElementById&&document.
createElement){

          switchBar();

    }

}

</script>

<style type="text/css">

body {

    margin: 0;

}

#navbar {

    float: left;

    width: 15%;

    height: 600px;

    background: #ccf;

    padding: 10px;

    border-left: 1px solid #000;

    border-bottom: 1px solid #000;

}

#switchbar {

    float: left;

    width: 18px;

    height: 600px;

    background: #fff url("tab_left.gif") repeat-y center center;

    padding-top: 10px;

    padding-bottom: 10px;

}

#content {

    float: left;

    width: auto;

    padding: 10px;

    border-bottom: 1px solid #000;

}

#headlines {

    float: right;

    width: 15%;

    height: 600px;

    background: #ccf;

    padding: 10px;

    border-left: 1px solid #000;

    border-right: 1px solid #000;

    border-bottom: 1px solid #000;

}

</style>

</head>

<body>

<div id="navbar">

<h1>Navbar Section</h1>

<p>Content goes here...</p>

</div>

<div id="headlines">

<h1>Headline Section</h1>

<p>Content goes here...</p>

</div>

<div id="content">

<h1>Page Name</h1>

<h2>Section title</h2>

<h3>Article title</h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.

Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum

facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis

libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla

urna id leo.Praesent aliquet pretium erat. Praesent non odio.Pellentesque

a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti

sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.</p>

</div>

</body>

</html>

 

Since the full code is rather incomplete without showing the background images "tab_left.gif" and "tab_right.gif," respectively, here they are.

 

 

 

 

 

The images are titled vertically to make the entire switcher bar look like a tabbed panel. As you can easily deduce, the first image is displayed initially when the page is loaded and the sidebar is visible.When the user clicks on the switcher bar, the "navbar" element is completely hidden from view and the second background image takes its place, while the main "content" element will expand itself to the left, giving users a larger visible area for reading page contents more easily. Similarly, if the user clicks again, the "navbar" element is redisplayed  and the main container will be stretched to its original size. Remember that the value "auto" is assigned to the "content" elementís width.

 

The visual representation of the effect is depicted below:

 

 

 

 

 

Thatís pretty nice, right? With a few lines of JavaScript code and a couple of common images, we have a fully functional, controllable navigation bar. Maybe itís not going to change your life as a Web designer, but itís worthy to keep it in the toolbox as a useful resource.

 

Wrapping up

 

Hopefully, weíre not done yet. The function in its current form needs some additional touches to really pull it together. We must completely remove the fixed heights initially assigned to the containers in the CSS declarations and still keep the script working for us. In the second part of this series, weíll be addressing these issues and adding more functionality to the original script. So, until the next time, stay tuned!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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