Home arrow JavaScript arrow Page 3 - Controllable Navigation Bars with JavaScript, Part II
JAVASCRIPT

Controllable Navigation Bars with JavaScript, Part II


In the first article, we developed a simple JavaScript function that performs the task of hiding and showing a side bar within a Web document. In this article, we will clean up our code to deal with potential browser incompatibilities.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 15
March 28, 2005
TABLE OF CONTENTS:
  1. · Controllable Navigation Bars with JavaScript, Part II
  2. · Dealing with those details
  3. · Cleaning up the CSS styles
  4. · JavaScript to the rescue: the improved "switchBar()" function

print this article
SEARCH DEVARTICLES

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.


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