Controllable Navigation Bars with JavaScript, Part II - Cleaning up the CSS styles
(Page 3 of 4 )
First, let's focus our attention on the CSS code. As we previously mentioned, we need to get rid of all of the fixed heights, as well as the value "auto" specified for the width of the "content" <div>. Starting out from that point, let's see how the new CSS styles look:
<style type="text/css">
body {
margin: 0;
}
#navbar {
float: left;
width: 15%;
background: #ccf;
padding: 10px;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
}
#switchbar {
float: left;
width: 18px;
background: #fff url("tab_left.gif") repeat-y center center;
padding-top: 10px;
padding-bottom: 10px;
}
#content {
float: left;
width: 60%;
padding: 10px 5px 10px 5px;
}
#headlines {
float: right;
width: 15%;
background: #ccf;
padding: 10px;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
</style>
As you can see, we've completely removed the fixed heights from the contextual selectors, and replaced the value "auto" for the "content" container's width, by specifying a value of "60%". You can play around with this, assigning different measures according to your specific needs. The rest of the code remains nearly the same, sticking to the initial example, basically styling the <div> elements with borders and background colors, and setting up the style for the "switcher" bar. Now, our styles look much cleaner.
Regarding the HTML markup, it's identical to the example illustrated in the first part of these series. But let's take a look at its listing:
<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>
Certainly, the HTML looks really simple; it just defines the three main <div> elements that will determine the overall page layout. In this case, I opted to build a three-column liquid design, but as usual, it's up to you to choose the best approach for the way that page elements will be laid out.
So, now that we've cleaned up the CSS styles and listed the corresponding markup, it's time to rewrite the original JavaScript function, in order to make it work gracefully with the new improvements applied to the source code. Hopefully, the target is not too hard to hit.
Next: JavaScript to the rescue: the improved "switchBar()" function >>
More JavaScript Articles
More By Alejandro Gervasio
/ 12 
