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?
Next: The JavaScript"switchBar()"function >>
More JavaScript Articles
More By Alejandro Gervasio
/ 7 
