Home arrow JavaScript arrow Page 2 - 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 - Building core functionality
(Page 2 of 4 )

 

To introduce ourselves to the process of creating a basic controllable sidebar, we’re going to define a three-column liquid layout. It will consist of a "navbar" <div> element positioned to the left of the document, a "container" <div> element centered on the page, and a third <div>, positioned to the right, defined as the "headlines" column. Finally, we’ll specify a "switchbar" selector, applied to a <div> element that will behave as a switcher for the "navbar" column, hiding it or displaying it according to the user’s actions.

 

No "header" and "footer" sections will be included in the markup and CSS rules, in order to keep the code uncluttered. However, whether your layout needs fall under a two-column model or under other categories, the solution is perfectly adaptable. Once we’ve defined the basic guidelines for page layout, let’s start listing the CSS code:

 

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

 

Taking a look at the above CSS declarations, we can see that the three main columns have been styled, defining background colors, borders and the like, following a momentary inspiration. Also, we’ve set temporary fixed heights for them, to show the visual effect of the example without needing to populate each column with content. This will be kept that way only for the moment. Our final approach will remove entirely the height properties. Remember that we’re using liquid design here. Lastly, here is a key concept to take into account: we’ve assigned a value of "auto" for the width of the "content" <div>, meaning that this element will expand and stretch over the page, according to the presence or absence of any column positioned to the left or the right. This value is very important to make the effect work seamlessly.

 

Having explained the why of fixed heights, let’s have a look at the "switchbar" selector. We’ll be sticking this one to the switcher bar, as mentioned previously. Note that we’ve assigned a value of 18px for its width property and a background image "tab_left" tiled vertically, which will make the bar look like a tabbed panel. Once more, feel free to include any image according to your personal taste. Now we’re getting somewhere! The HTML markup is listed below:

 

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

 

Well, don’t blame me for being a little verbose about the example. It's just that I was looking for a little inspiration and…couldn’t find it. Okay, let’s take a closer look at the HTML markup. It’s really simple and well structured. As we can see, the left positioned <div> defined as "navbar" is the target element to be displayed and hidden in sequence. Hopefully you’re wondering, how can it be done? The answer is a JavaScript function that will perform the hide-show task, according to the user’s actions. It’s time to code, don’t you agree?

 


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