JAVASCRIPT

Collapsible Navigation Bars with CSS and JavaScript

In this first part of a four-part series, I will show you how to build a dynamic navigation bar that can be turned on and off by means of a simple switcher. This small web application will combine some JavaScript code, a few CSS styles and basic markup.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 2

September 21, 2009

TABLE OF CONTENTS:

I will start my demonstration of how to build a simple navigation bar that can be displayed and hidden alternately by users by creating a basic web page. It will be comprised of some typical sections, such as a container for housing the navigation bar in question, a main content area, and finally a footer section.

Below I included the definition for a sample (X)HTML file, which is responsible for building the aforementioned web page sections. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>Example on building a basic navigation bar</title>

body{

padding: 0;

margin: 0;

background: #fff;

}

h2{

margin: 0;

font: bold 18px Arial, Helvetica, sans-serif;

color: #000;

}

font: normal 12px Arial, Helvetica, sans-serif;

color: #000;

}

#navbar{

padding: 10px;

background: #ffc;

}

#navbar ul{

list-style: none;

}

#navbar li{

display: inline;

padding-right: 4%;

}

#navbar a:link,#navbar a:visited{

font: normal 12px Arial, Helvetica, sans-serif;

color: #039;

text-decoration: none;

}

#navbar a:hover{

text-decoration: underline;

}

#maincol{

position: relative;

padding: 30px 10px 30px 10px;

background: #eee;

}

#footer{

padding: 10px;

background: #ffc;

}

</style>

</head>

<body>

<h2>This is the navigation bar of the web page</h2>

<ul>

</ul>

</div>

<h2>This is the center column of the web page</h2>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas enim. Nulla facilisi. Vestibulum accumsan augue vulputate justo. Fusce faucibus. Sed blandit, neque sed lacinia nonummy, diam quam imperdiet justo, at dictum augue nunc a neque. Sed urna lacus, tincidunt at, aliquam id, fringilla id, felis. Vivamus feugiat molestie quam. Sed id dolor. Sed ac purus id sapien </p>

<p>

</div>

<h2>This is the footer section of the web page</h2>

<p>

</div>

</body>

</html>

As you can see, the definition of the previous (X)HTML file isn't rocket science. Basically, it contains three different sections, identified first as "nabvar," then "maincol" and finally "footer." Besides, I've incorporated a few simple CSS styles on top of the file in question to make the whole web page look a bit more attractive.

The screen shot below shows how this sample web document looks:

Having already defined the previous (X)HTML file, it's time to show some action here. As you can see, the navigation bar of this basic web page includes some conventional links, as one would expect from an element like this. However, my purpose is to turn this static bar into a dynamic one that can be hidden or displayed alternately by an user.

Here's where JavaScript comes in. It's possible to build a small client-side application that performs this process in an unobtrusive way, and best of all, without sacrificing the functionality and accessibility of the navigation bar.

This sounds really interesting, doesn't it? However, to learn the full details, you'll have to read the following section.

Next: Adding behavior to the previous navigation bar >>