Collapsible/Collapsable Explorer Type Menu - Tested in IE 7.0, Netscape 8.1.3, Opera 9.21, Firefox 2.0.0.4 and AOL Explorer 1.5

For your Information: Before we begin, we feel obligated to advise you that the above hierarchy type menu is not for the novice by any means. It is very highly configurable and elaborate to say the least. If you do not have a good Solid Knowledge of HTML coding, javascripts, CSS Style Sheets and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Since this script is quite configurable and can be confusing (if you let it), we will take it step by step with particular attention to all aspects of the configurations.

Step One: Is to save as and upload three(3) images into your directory for this effect. See below:

Step Two: Is to paste all three (3) parts of code (two in the <HEAD> section - CSS and javascript) and one part in the <BODY> section wherever you want this effect to appear.

For your Information: The site you will be getting this script has it set up as a complete HTML document. Study the code and just copy and paste the relative parts in their respective places.

Step Three: Once all three sections of code are in place, lets start with reconfiguring the path for the images you uploaded. There are two (2) different areas of the code that you will need to change the path of the images. The first section is located in the <HEAD> section of the javascript code (not the CSS style section). The second part where you will need to change the image path is in the <BODY> section of code. The two(2) other items covered in the below sections are that of the names of the main link names (associated with the open and closed folder icons) and the background color of the effect itself. See below where and howto.

Default Sections

Default <HEAD> Section

//USER DEFINABLE OPTIONS
//-----------------------

optionsImage = "../../images/downarrow.gif";
backGroundColour = "#FFFFFF";
openFolder = "../../images/folder_open.gif";
closedFolder = "../../images/folder_closed.gif";

//-----------------------

Default <BODY> Section

<div id="allmenus" style="width:200;border-style:double;border-width:1px">
<div id="heading" class="menustyle">
<a href="javascript:whatToDo('options1');" class="biglink"><img src="/icons/folder_closed.gif" name="folder" border="0"> Languages</a>
<div id="options1" class="optionsstyle"></div>
</div>
<div id="heading2" class="menustyle">
<a href="javascript:whatToDo('options2');" class="biglink"><img src="/icons/folder_closed.gif" name="folder2" border="0"> Web Design</a>
<div id="options2" class="optionsstyle"></div>
</div>
<div id="heading3" class="menustyle">
<a href="javascript:whatToDo('options3');" class="biglink"><img src="/icons/folder_closed.gif" name="folder3" border="0"> Javascript</a>

in the above <BODY> section all three (3) places have the same image ( folder_closed.gif ) being called.

In reference to the "backGroundColour = "#FFFFFF"; the default is defined as FFFFFF which is white. If you notice in our reconfiguration, we have it as 000000 which is black.

Reconfigured Sections

Reconfigured <HEAD> Section

//USER DEFINABLE OPTIONS
//-----------------------

optionsImage = "downarrow.gif";
backGroundColour = "#000000";
openFolder = "folder_open.gif";
closedFolder = "folder_closed.gif";

//-----------------------

For your Information: On the above reconfigurations, we show the images called from your root or top directory. If for example you have uploaded the images into a directory called images then the reconfiguration would look something like the below.

optionsImage = "images/downarrow.gif";
backGroundColour = "#FFFFFF";
openFolder = "images/folder_open.gif";
closedFolder = "images/folder_closed.gif";

The same applies for the below section of code also in regards to the image path.

Reconfigured <BODY> Section

<div id="allmenus" style="width:200;border-style:double;border-width:1px">
<div id="heading" class="menustyle">
<a href="javascript:whatToDo('options1');" class="biglink"><img src="images/folder_closed.gif" name="folder" border="0"> Languages</a>
<div id="options1" class="optionsstyle"></div>
</div>
<div id="heading2" class="menustyle">
<a href="javascript:whatToDo('options2');" class="biglink"><img src="images/folder_closed.gif" name="folder2" border="0">Web Design</a>
<div id="options2" class="optionsstyle"></div>
</div>
<div id="heading3" class="menustyle">
<a href="javascript:whatToDo('options3');" class="biglink"><img src="images/folder_closed.gif" name="folder3" border="0">Javascript</a>

Step Four: Once you have all the above reconfigured, now let's work with the CSS Style Sheet in the <HEAD> section. This controls all the link color, font size and face etc. With this you just need to experiment with all the different combinations until it fits your site.

to the CSS Style sheet in reference to the link and hover colors. It will effect every link on the page. In other words whatever colors you set for the effect will have the same effect on all links on the page. To the right is the section of code we are referencing with default colors. If this is not a problem then do not give it much thought. If it conflicts with other link colors on your page like it did with us then the work around is to set this section of code to the other link colors etc. on your page and then color code each link within this effect with the colors you want.
<font color="#1e90ff">Link Name Here</a></font>

Define Areas In CSS Section

This part will be for all the actions and effects on the links including hovering with the cursor over each link.

font-family: This section defines the font size and color of the text that appears after you click on the Main Links that are not defined as links

.menustyle This section defines the border style, border width and color surrounding the entire effect.

menustyle

.optionsstyle This section defines the background and text colors of the options once you click on the Main link(s) and it opens.

optionstyle

.biglink This section defines the large main links in reference to font size and weight on the effect just to the right of the folder icons.

biglink

Step Five: Next we will be adding the links into the menu. This is done in the <HEAD> section of the code.

//-----------------------

//Menu Options
downArrow = "<img src="+optionsImage+"> ";
var menuOption1 = downArrow + "<a href='../../development/devtools/perl.shtml'>Perl/CGI</a><br>
" + downArrow + "Javascript<br>
" + downArrow + "PHP<br>
" + downArrow + "Coldfusion<br>
";var menuOption2 = downArrow + "HCI<br>
" + downArrow + "Design Software<br>
" + downArrow + "Web Graphics<br>
";var menuOption3 = downArrow + "Tutorial<br>
" + downArrow + "Archive<br>
";

Notice in the above default section the color coded areas.

var menuOption1 This denotes which section the links shall appear once you open the main or "biglink" link(s). 1, 2 or 3
This color denotes the opening and closing code for a link.
' Leave the single apostrophe as is. This is also used if you want to make the link open in a new window*.
Red signifies what needs to be removed. The ../../ denotes the link is being called from a sub directory within a domain. Remove that portion and just use a complete URL.
This color denotes the URL path.
This color denotes the name of a link that has not been configured.
This color denotes the clickable link.

//-----------------------

//Menu Options
downArrow = "<img src="+optionsImage+"> ";
var menuOption1 = downArrow + "<a href='http://webchalkboard.tripod.com/development/devtools/perl.shtml'>
Perl/CGI</a><br>
" + downArrow + "<a href='URL Goes Here'>Javascript<a/><br>
" + downArrow + "<a href='URL Goes Here'>PHP<a/><br>
" + downArrow + "<a href='URL Goes Here'>Coldfusion<a/><br>
";var menuOption2 = downArrow + "<a href='URL Goes Here'>HCI<a/><br>
" + downArrow + "<a href='URL Goes Here'>Design Software<a/><br>
" + downArrow + "<a href='URL Goes Here'>Web Graphics<a/><br>
";var menuOption3 = downArrow + "<a href='URL Goes Here'>Tutorial<a/><br>
" + downArrow + "<a href='URL Goes Here'target=_blank'>Archive<a/><br>
";

As you can notice in the above where and howto add the links. Just follow the pattern for more or less.
Just click on any of the above "Links" and see how they will open in a new window.
* As you can see on the left side where the asterisk is located, notice on the above how we added the attribute of target=_blank' into the last link. This is to make the link open in a new window.
The way we have it coded is the only way it will open in a new window. Otherwise it will not work and you will get an error in the taskbar.

Step Six: To add more than the default number of links in the already pre-existing sections, follow the pattern below.

Copy and paste the below section of code where you want another link.

+ downArrow + "<a href='URL Goes Here'>Name Of Link Here<a/><br>"

";var menuOption3 = downArrow + "<a href='URL Goes Here'>Tutorial<a/><br>
" + downArrow + "<a href='URL Goes Here'target=_blank'>Archive<a/><br>
" + downArrow + "<a href='URL Goes Here'>Name Of Link Here<a/><br>"

Note Of Importance: On the page you are going to have this effect on or any page that will link to the page with this effect, be sure of one thing within either the linking URL or the URL this effect is on. Do Not have the backslash-forward slash / (whichever you call it) at the end of the URL or linked to URL. If you do, the effect Will Not Work!. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/collapsiblemenu.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/collapsible.html/

S elect the links above to see what we are explaining about the Right and Wrong URL address.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]