Collapsible Menu Bar

Wednesday 12th January 2011

All the following is the text from the webpage www.RichsWebArchive.com/aboutthissite/collapsiblemenubar/index.php and it reads as though you are viewing the actual page:

I noticed a cool feature on a Google page while I was getting the custom search going. You can click on the divider between the left-hand bar and the main contents and it hides the left-hand bar. So I thought I'd try and get something similar going on my site.

There is an item on the blog previous to this page which talks about this a bit, it's probably a good idea to check it out before reading the rest of this. The first paragraph is the same.

There is a Java object called Document. Each HTML document loaded into a browser window becomes a Document object. The Document object provides access to all HTML elements in a page, from within a script.
It is therefore possible to use very simple JAVA functions to change an elements style attributes with lines of code like this:

< script type="text/javascript">
function menuOff() {
 document.getElementById("content").style.left="2%";
 document.getElementById('navigation').style.display='none';
 document.getElementById('hDivider1').style.display='none';
 document.getElementById('hDivider2').style.display='';
 document.getElementById('pagelinks').style.display='none';
}

function menuOn() {
 document.getElementById("content").style.left="26%";
 document.getElementById('navigation').style.display='';
 document.getElementById('hDivider1').style.display='';
 document.getElementById('hDivider2').style.display='none';
 document.getElementById('pagelinks').style.display='';
}
< script>

The code above was added to sitewideheadcode.htm. The first line of each function adjusts the left hand side of the content element. The subsequent lines turn the display of various elements on or off.
The link bars, with a small arrow graphic, are added with the following code:

< a href="#" onclick="document.execute(menuOff()); ">
 < div id="hDivider1"> 
 < img src="/images/bluearrowleft.gif" border="0"  
 align="right" vspace="250%"/> < /div>
< /a>
< a href="#" onclick="document.execute(menuOn()); ">
 < div id="hDivider2"> 
 < img src="/images/bluearrowright.gif" border="0" 
 align="left"  vspace="250%"/> < /div>
< /a> 

The code above was placed in a new file called sitewideendofbodycode.htm and the necessary php include was placed at the end of every body section on the site. It creates two vertical bars and their little arrow graphics which act as the links for collapsing and revealing the navigation bar.

The key feature here is the onclick="document.execute ... part of the tags. These call the simple JAVA functions now included in the head sections of every page on the site.

The following lines were added to the sites main CSS file rwa1.css:

#hDivider1 {position:fixed; top:14%; bottom:0%;
 margin-bottom:1%; left:25%; background: #D4ECFB;
 width:1%;  padding-top:0%; padding-bottom:1% 
 overflow:auto; }

#hDivider2 {position:fixed; top:14%; bottom:0%;
 margin-bottom:1%; left:1%; background: #D4ECFB;
 width:1%;  padding-top:0%; padding-bottom:1%
 overflow:auto; }

It took some fiddling with the CSS to get everything to sit right but it wasn't too tricky. Play around with the values in the CSS yourself to see why they're set the way they are.

The code in the functions described in this page has been updated so that the transitions are smooth. Please see jQuery Transitions.

Once again, all the preceding text is from the webpage www.RichsWebArchive.com/aboutthissite/collapsiblemenubar/index.php and it reads as though you are viewing the actual page: