As I promised in the previous lines, here’s the complete code for the switcher bar:
<html>
<head>
<title>SWITCHER BAR</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
switchBar=function(){
var navbar,content,swbar;
navbar=document.getElementById('navbar');
if(!navbar){return;}
content=document.getElementById('content');
if(!content){return;}
swbar=document.createElement('div');
swbar.id='switchbar';
swbar.title='hide navbar';
content.parentNode.insertBefore(swbar,content);
swbar.onclick=function(){
if(navbar.style&&swbar.style){
if(!navbar.style.display||
navbar.style.display=='block'){
navbar.style.display='none';
swbar.style.backgroundImage=
'url(tab_right.gif)';
swbar.title='show navbar';
}
else{
navbar.style.display='block';
swbar.style.backgroundImage=
'url(tab_left.gif)';
swbar.title='hide navbar';
}
}
}
}
window.onload=function(){
if(document.getElementById&&document.
createElement){
switchBar();
}
}
</script>
<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>
</head>
<body>
<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>
</body>
</html>
Since the full code is rather incomplete without showing the background images "tab_left.gif" and "tab_right.gif," respectively, here they are.
The images are titled vertically to make the entire switcher bar look like a tabbed panel. As you can easily deduce, the first image is displayed initially when the page is loaded and the sidebar is visible.When the user clicks on the switcher bar, the "navbar" element is completely hidden from view and the second background image takes its place, while the main "content" element will expand itself to the left, giving users a larger visible area for reading page contents more easily. Similarly, if the user clicks again, the "navbar" element is redisplayed and the main container will be stretched to its original size. Remember that the value "auto" is assigned to the "content" element’s width.
That’s pretty nice, right? With a few lines of JavaScript code and a couple of common images, we have a fully functional, controllable navigation bar. Maybe it’s not going to change your life as a Web designer, but it’s worthy to keep it in the toolbox as a useful resource.
Hopefully, we’re not done yet. The function in its current form needs some additional touches to really pull it together. We must completely remove the fixed heights initially assigned to the containers in the CSS declarations and still keep the script working for us. In the second part of this series, we’ll be addressing these issues and adding more functionality to the original script. So, until the next time, stay tuned!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 7 
