Wednsday, June 26, 2002
This page contains source and implementation of expandable menus,
A system of menuing a large number of options in a small space
The intent of this page is to assist you in creating
an effective menuing system, and to help you avoid the day or
so it took me to get these to work on internet explorer, mozilla
netscape navigator 6.x, konquerer and others.
Questions, comments or praise can be directed at wade@aproximation.org
Example
 | Reasons to use expandable javaMenus
|
| | |
· Lots of option in a small space
· Works in IE, NN 6.x, Moz, Kon
· Easy to implement
|
|
| Reasons NOT to use expandable javaMenus
|
| | |
· Only one javaMenu item
· Using NN 4.x
· space not a problem
|
|
Source
<html><head><title>Expandable javaMenus example</title>
<script type="text/javascript">
cacheImage1=new Image(10,10);
cacheImage2=new Image(10,10);
cacheImage1.src="images/opened.png";
cacheImage2.src="images/closed.png";
function toggleOpen(theDiv,theImage) {
if(document.layers){
if (document.layers[theDiv].display == "none") {
document.layers[theDiv].display="";
document.images[theImage].src = "images/closed.png";
} else {
document.layers[theDiv].display="none";
document.images[theImage].src = "images/opened.png";
}
}
if(document.all){
if (theDiv.style.display == "none") {
theDiv.style.display="";
theImage.src = "images/closed.png";
} else {
theDiv.style.display="none";
theImage.src = "images/opened.png";
}
}
else {
if (document.getElementById(theDiv).style.display == "none") {
document.getElementById(theDiv).style.display="";
document.images[theImage].src = "images/closed.png";
} else {
document.getElementById(theDiv).style.display="none";
document.images[theImage].src = "images/opened.png";
}
}
}
function closeAll() {
if (document.all) {
toggleOpen(Layer1,Layer1Img);
toggleOpen(Layer2,Layer2Img);
}
else {
toggleOpen("Layer1","Layer1Img");
toggleOpen("Layer2","Layer2Img");
}
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="closeAll();">
<table><tr><td><a href="javascript:void(0);" onclick="if (document.all) {toggleOpen(Layer1,Layer1Img);} else {toggleOpen('Layer1','Layer1Img');}"><img height="10" width="10" alt="" BORDER="0" align="top" src="images/closed.png" name="Layer1Img" id="Layer1Img"></a></td><td>Reasons to use expandable javaMenus
</td></tr></table>
<div id="Layer1" name="Layer1" style="font-size:12px;font-weight:300;display:">
<table><tr><td width="20"></td><td><table><tr><td width="5"> </td><td>
<strong><big>·</big></strong> Lots of option in a small space<br>
<strong><big>·</big></strong> Works in IE, NN 6.x, Moz, Kon<br>
<strong><big>·</big></strong> Easy to implement
</td></tr></table>
</td></tr></table>
</div>
<table><tr><td><a href="javascript:void(0);" onclick="if (document.all) {toggleOpen(Layer2,Layer2Img);} else {toggleOpen('Layer2','Layer2Img');}"><img height="10" width="10" alt="" BORDER="0" align="top" src="images/closed.png" name="Layer2Img" id="Layer2Img"></a></td><td>Reasons NOT to use expandable javaMenus
</td></tr></table>
<div id="Layer2" name="Layer2" style="font-size:12px;font-weight:300;display:">
<table><tr><td width="20"></td><td><table><tr><td width="5"> </td><td>
<strong><big>·</big></strong> Only one javaMenu item<br>
<strong><big>·</big></strong> Using NN 4.x<br>
<strong><big>·</big></strong> space not a problem
</td></tr></table>
</td></tr></table>
</div>
</body></html>
Implimentation
To implement this design for dynamic sites I simply made two php files
and included them. expandCode.php for the code which lies in the script
segment in the head, and expandMenu.php which id the body of the expandable
divisions. The contents of the files are displayed below.
I used the str_replace function to replace fields like DIVNAME with
the name of the division and LABEL and OPTIONS with the label and options of the menus
Its just that simple
To make all the menus open in incompatable browsers the menus start open and the
onload call in the body tag calls closeAll(). This way your menus will show up in
incompatable browsers, albiet fully expanded. Pay close attention to the use of quotes
in the IE vs everything els browsers. You have to write the function to generate the
closeAll() function dynamicaly, its more site and page specific and therefor cant be
abstracted as easily as the other portions I've layed out for you.
expandCode.php
<?php
$javaFunction="";
$javaFunction.="function toggleOpen(theDiv,theImage) {\\n";
//netscape
$javaFunction.="if(document.layers){\\n";
$javaFunction.=" if (document.layers[theDiv].display == \\"none\\") {\\n";
$javaFunction.=" document.layers[theDiv].display=\\"\\";\\n";
$javaFunction.=" document.images[theImage].src = \\"images/closed.png\\";\\n";
$javaFunction.=" } else {\\n";
$javaFunction.=" document.layers[theDiv].display=\\"none\\";\\n";
$javaFunction.=" document.images[theImage].src = \\"images/opened.png\\";\\n";
$javaFunction.=" }\\n";
$javaFunction.=" }\\n";
//internet explorer
$javaFunction.="if(document.all){\\n";
$javaFunction.=" if (theDiv.style.display == \\"none\\") {\\n";
$javaFunction.=" theDiv.style.display=\\"\\";\\n";
$javaFunction.=" theImage.src = \\"images/closed.png\\";\\n";
$javaFunction.=" } else {\\n";
$javaFunction.=" theDiv.style.display=\\"none\\";\\n";
$javaFunction.=" theImage.src = \\"images/opened.png\\";\\n";
$javaFunction.=" }\\n";
$javaFunction.=" }\\n";
//netscape 6?
$javaFunction.="else {\\n";
$javaFunction.=" if (document.getElementById(theDiv).style.display == \\"none\\") {\\n";
$javaFunction.=" document.getElementById(theDiv).style.display=\\"\\";\\n";
$javaFunction.=" document.images[theImage].src = \\"images/closed.png\\";\\n";
$javaFunction.=" } else {\\n";
$javaFunction.=" document.getElementById(theDiv).style.display=\\"none\\";\\n";
$javaFunction.=" document.images[theImage].src = \\"images/opened.png\\";\\n";
$javaFunction.=" }\\n";
$javaFunction.=" }\\n";
$javaFunction.="}\\n";
$javaFunction.="\\n";
?>
expandMenu.php
<?php
$javaMenu="";
$javaMenu.="<table><tr><td><a href=\\"javascript:void(0);\\" onclick=\\"if (document.all) {toggleOpen(DIVNAME,DIVNAMEImg);} else {toggleOpen('DIVNAME','DIVNAMEImg');}\\"><img height=\\"10\\" width=\\"10\\" alt=\\"\\" BORDER=\\"0\\" align=\\"top\\" src=\\"images/closed.png\\" name=\\"DIVNAMEImg\\" id=\\"DIVNAMEImg\\"></a></td><td>LABEL</td></tr></table>\\n";
$javaMenu.="<div id=\\"DIVNAME\\" name=\\"DIVNAME\\" style=\\"font-size:12px;font-weight:300;display:\\">\\n";
$javaMenu.="<table><tr><td width=\\"20\\"></td><td>OPTIONS</td></tr></table>\\n";
$javaMenu.="</div>\\n";
?>
Actualization
There occured a problem implementing this code for one Hughes, Clyde L., who shall
from now on be reffered to as HSC. The transcript of our correspondance is as
follows:
(HSC): Hi,
I was wondering if you had ever encountered any conflict between this script (expandable menu example - http://www.aproximation.org/expand/ )and another (like a tree menu) on the same page? I have two scripts on one page (a menu tree script, and the expandable menu script on your page), and when the <onLoad="closeAll()"> tag seems to keep the menu tree from appearing. When I comment out the <onLoad="closeAll()"> tag, the menu tree works only in Netscape 7 (although the expandable menu doesn't); although it never has worked with IE 6. Might you know if there could there be a work-around (possibly putting the scripting into an external .js file, etc)?
Many thanks for your help,
Clyde
(HSC): Hi again, Wade,
Thanks for your help in this. I found that by taking the onLoad="closeAll();" tag out of the script and by placing replacement script:
<script>
closeAll();
</script>
just after the last <div> in the expandableMenu script enabled the expandableMenus to work with the menu tree on the same page.
Thanks again,
Clyde