Code:
<script language="JavaScript">
new tree (TREE_ITEMS, TREE_TPL);
</script>

Code:
<style>
a, A:link, a:visited, a:active
{color: #0000aa; text-decoration: none; font-family: Arial, Tahoma, Verdana; font-size: 16px}
A:hover
{color: #ff0000; text-decoration: none; font-family: Arial, Tahoma, Verdana; font-size: 16px}
p, tr, td, ul, li
{color: #000000; font-family: Arial, Tahoma, Verdana; font-size: 16px}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Arial, Tahoma, Verdana; font-size: 18px; margin: 0px; padding: 7px;}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Arial, Tahoma, Verdana; font-size: 17px;}
.intd
{color: #000000; font-family: Arial, Tahoma, Verdana; font-size: 15px; padding-left: 20px; padding-right: 20px;}
</style>

<script language="JavaScript" src="tree.js"></script>
<script language="JavaScript" src="tree_items.js"></script>
<script language="JavaScript" src="tree_tpl.js"></script>

Main Menu

© 2007  WebStudioHelp.net & SunsetFX.com          All Rights Reserved Worldwide     
No images, graphics or text on this site may be reproduced without the written permission of WebStudioHelp.net
'Back to the Beach',  'Web Studio' and all content accessed through the Web Studio Forums are Copyright Back to the Beach Software and Web Studio.
Examples listed are with permission.

Navigation

Free Version of the Tigra Tree Menu

Although I already use the Milonic Menu for this site, I thought that other users might find a Tree Style Menu helpful. As you can see from the page I've added (as a way of seeing the number of links on this site), the Tigra Tree Menu has its uses. To check the site and download the menu, check their site here.

The menu layout can be a little confusing at first, but once you get the hang of it, it's not too difficult to figure out.

Although there are modifications you can find and implement from the Tigra Forums, I'm going to base the items here on the free downloadable menu. Please direct questions about the menu to their Support Forums.

The Download

Downloading the free version of the menu results in these files:

- icons (folder)
   - empty.gif
   - folder.gif
   - folderopen.gif
   - foldersel.gif
   - minus.gif
   - page.gif
   - pagesel.gif
   - plus.gif
- index.html
- tree.js
- tree_items.js
- tree_tpl.js

You can use the images they provide, or do as I did and find others to replace them. Make sure that the images are all the same size and are named to exactly replace those in the folder. The empty.gif file is a transparent image used for spacing and should be left as is.

Code Placement

Here's where I placed the various pieces of code to get the menu to display properly:

- Inserting an HTML Object on the page, I double-clicked on it and pasted in this:

Next, I placed the page style code and items to call the script. Open the same HTML Object by right-clicking and then select Properties. Choose Object HTML and select Inside Page Header. Paste this:

Note that the code posted above is using larger font sizes than those in the downloaded file. If you want the font a different size, experiment as needed, but make sure to keep a copy of the original settings.

That's it as far as how to get the menu on the page!

Making Modifications

The first thing I did was to delete some of the page style settings. I already have my link colors, etc., as I want them, so I removed the portion of code that changed them.

In the HTML Object, I opened Properties / Object HTML / Inside Page Header. Compare what I ended up with against that of the original code:

Code:
<style>
p, tr, td, ul, li
{color: #000000; font-family: Arial, Tahoma, Verdana; font-size: 16px}
.header1, h1
{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Arial, Tahoma, Verdana; font-size: 18px; margin: 0px; padding: 7px;}
.header2, h2
{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Arial, Tahoma, Verdana; font-size: 17px;}
.intd
{color: #000000; font-family: Arial, Tahoma, Verdana; font-size: 15px; padding-left: 20px; padding-right: 20px;}
</style>

<script language="JavaScript" src="tree.js"></script>
<script language="JavaScript" src="tree_items.js"></script>
<script language="JavaScript" src="tree_tpl.js"></script>

The Menu Tree Structure

Getting the menu to display as you want will take a little bit of adjustment, but once you have the basic outline completed, you can easily copy and paste new items. The file with the actual menu items is tree_items.js   You can open it with Notepad.

The menu itself uses apostrophes as a way of indicating the start and end of an item, and commas to separate those items, like this:

Code:
['Downloadable Documentation','http://www.webstudio.com/site/WSDocumentation.asp'],

The reason I mention that is because missing even one item in the menu will result in it not displaying at all. For that reason, you'll want to continually test that it displays properly as changes are made.

Using apostropes to end an item, the menu will also fail if you try to add something like Tom's Site in the middle of an item. Instead, you'll need to write it like this: Tom<insert backslash here>'s Site.    (Sorry - backslashes don't display properly when trying to display them on a web page).


The basic tree structure looks like this:

Code:
var TREE_ITEMS = [
     ['SunsetFX.com / Web Studio Help Site / Menu Tree', 0,
         ['Web Studio', 0,
             ['WS Program', 0,
                 ['Documentation', 0,
                     ['Downloadable Documentation','http://www.webstudio.com/site/WSDocumentation.asp'],
                     ['WS Store FAQs','http://63.108.90.74/site/faq.asp?Page_Id=600'],
                     ['WS Tech Support FAQs','http://www.webstudio.com/site/WSTSFaq.asp'],
                     ['Web Studio Tutorials','http://63.108.90.74/site/WSTutorial.asp'],
                 ],
                 ['Downloading / Adding Web Studio Content', 0,
                     ['Web Studio Content Gallery','http://www.webstudio.com/site/WSContent.asp'],
                     ['Importing Templates from V2 to V4','http://www.webstudioforum.com/viewtopic.php?topic=7299&forum=9'],
                 ],
                 ['Upgrading Web Studio','http://www.webstudio.com/site/WSProducts.asp?'],
                     ['Web Studio License','http://www.webstudioforum.com/viewtopic.php?topic=7526&forum=22'],
                     ['Web Studio 4, SP3 Info','http://www.webstudioforum.com/viewtopic.php?topic=7551&forum=8'],
                     ['Web Studio Newsletter Archives','http://www.webstudio.com/site/Newsletters.asp'],
                 ],
             ],
         ]
     ];

Below is a basic layout of the menu format.

Each menu layer can have another item / group of items within it, but must be closed using:   ],

Note that it is also easier to keep track of the various sections if you keep each section indented, as in the graphic, below.

Adding the Expand All / Collapse All buttons:

All initial attempts to get the Expand All / Collapse All function to work properly didn't work out too well. Along with the gracious help of Surfa, various items noted in the Tigra Forums were attempted, but nothing seemed to work as it should have.

As a last resort (and because I didn't want to post this site address in their forums), I sent an email to their tech support. I received an email very shortly afterward from Dmitry - his response was perfect - what the required code was, and where it should be placed. Here is that code:

Code:
<input type=button value="expand_all" onclick="expand_all()">
<input type=button value="collapse_all" onclick="collapse_all()">

<script language="JavaScript">
function expand_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index[i];
if (!o_item.b_opened) o_item.open();
}
}
function collapse_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index[i];
if (o_item.b_opened) o_item.open(1);
}
}
</script>

That code was placed where the Tree Menu is called. Because I wanted the buttons to be at the top of the page / above the menu items, I modified the code that is listed at the top of this page to the following. Note that the button code is before the code to call the menu:

Code:
<input type=button value="expand_all" onclick="expand_all()">
<input type=button value="collapse_all" onclick="collapse_all()">

<script language="JavaScript">
function expand_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index[i];
if (!o_item.b_opened) o_item.open();
}
}
function collapse_all () {
for (var i = 1; i < trees[0].a_index.length; i++) {
var o_item = trees[0].a_index[i];
if (o_item.b_opened) o_item.open(1);
}
}
</script>

<script language="JavaScript">
new tree (TREE_ITEMS, TREE_TPL);
</script>

I'm not sure that it makes any difference, but I did use a slightly modified version of the Tree.js file (found in their forums). Should you have any issues, try using the following. Make sure to save the original Tree.js file somewhere, then copy / paste this into Notepad, then save as Tree.js in the original's place.

Code:

// Title: Tigra Tree
// Description: See the demo at url
// URL: http://www.softcomplex.com/products/tigra_menu_tree/
// Version: 1.12
// Modifed by CHM
// Date: 10/13/2005
// Improvements:
// - Added function toggle2, to handle selections from the node name.
// Modified by TFI
// Date: 05-04-2005 (mm-dd-yyyy)
// Notes: This script is free. Visit official site for further details.
// Improvements:
// - Root folder cannot be collapsed or selected (controlled by "norootclose" variable)
// - Only one folder may be open on the same level (if variable "onefolder" is true)
// - Removed caret if a link is focused (with onFocus=this.blur())
// - When closing a folder, all subfolders are closed recursively ("closesubs" variable)
// - Removed doubleclick to open subfolders
// - Added expand all and collapse all function
// - Activate selection on clicking '+'

onefolder = false
norootclose = false
noclose = true
norootselect = false
closesubs = false

function tree (a_items, a_template) {

this.a_tpl = a_template;
this.a_config = a_items;
this.o_root = this;
this.a_index = [];
this.o_selected = null;
this.n_depth = -1;

var o_icone = new Image(),
o_iconl = new Image();
o_icone.src = a_template['icon_e'];
o_iconl.src = a_template['icon_l'];
a_template['im_e'] = o_icone;
a_template['im_l'] = o_iconl;
for (var i = 0; i < 64; i++)
if (a_template['icon_' + i]) {
var o_icon = new Image();
a_template['im_' + i] = o_icon;
o_icon.src = a_template['icon_' + i];
}

this.toggle = function (n_id) {
var o_item = this.a_index[n_id];
if(!o_item.b_opened) {
if (onefolder) expand_or_collapse_level(this,o_item.n_depth)
};
o_item.open(o_item.b_opened)
};
this.toggle2 = function (n_id) {
var o_item = this.a_index[n_id];
if(!o_item.b_opened) {
if (onefolder) expand_or_collapse_level(this,o_item.n_depth)
};
o_item.open(false)
};

this.select = function (n_id) { return this.a_index[n_id].select(); };
this.mout = function (n_id) { this.a_index[n_id].upstatus(true) };
this.mover = function (n_id) { this.a_index[n_id].upstatus() };

this.a_children = [];
for (var i = 0; i < a_items.length; i++)
new tree_item(this, i);

this.n_id = trees.length;
trees[this.n_id] = this;

for (var i = 0; i < this.a_children.length; i++) {
document.write(this.a_children[i].init());
this.a_children[i].open();
}
}
function tree_item (o_parent, n_order) {

this.n_depth = o_parent.n_depth + 1;
this.a_config = o_parent.a_config[n_order + (this.n_depth ? 2 : 0)];
if (!this.a_config) return;

this.o_root = o_parent.o_root;
this.o_parent = o_parent;
this.n_order = n_order;
this.b_opened = !this.n_depth;

this.n_id = this.o_root.a_index.length;
this.o_root.a_index[this.n_id] = this;
o_parent.a_children[n_order] = this;

this.a_children = [];
for (var i = 0; i < this.a_config.length - 2; i++)
new tree_item(this, i);

this.get_icon = item_get_icon;
this.open = item_open;
this.select = item_select;
this.init = item_init;
this.upstatus = item_upstatus;
this.is_last = function () { return this.n_order == this.o_parent.a_children.length - 1 };
}

function item_open (b_close) {
if (!(this.n_depth==0 && b_close && norootclose)) { //**** to avoid collapsing of first voice
//**** Added to close subfolders ****
if (!manageall && closesubs) {for (var i = 0; i < this.a_children.length; i++)
this.a_children[i].open(true)}
//***********************************
var o_idiv = get_element('i_div' + this.o_root.n_id + '_' + this.n_id);
if (!o_idiv) return;

if (!o_idiv.innerHTML) {
var a_children = [];
for (var i = 0; i < this.a_children.length; i++)
a_children[i]= this.a_children[i].init();
o_idiv.innerHTML = a_children.join('');
}
o_idiv.style.display = (b_close ? 'none' : 'block');

this.b_opened = !b_close;
var o_jicon = document.images['j_img' + this.o_root.n_id + '_' + this.n_id],
o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_jicon) o_jicon.src = this.get_icon(true);
if (o_iicon) o_iicon.src = this.get_icon();
this.upstatus();
}
}

function item_select (b_deselect) {
if (!(this.n_depth==0 && norootselect)) { //**** to avoid selection of first voice
if (!b_deselect) {
var o_olditem = this.o_root.o_selected;
this.o_root.o_selected = this;
if (o_olditem) o_olditem.select(true);
}
var o_iicon = document.images['i_img' + this.o_root.n_id + '_' + this.n_id];
if (o_iicon) o_iicon.src = this.get_icon();
get_element('i_txt' + this.o_root.n_id + '_' + this.n_id).style.fontWeight = b_deselect ? 'normal' : 'bold';
}
this.upstatus();
return Boolean(this.a_config[1]);

}

function item_upstatus (b_clear) {
window.setTimeout('window.status="' + (b_clear ? '' : this.a_config[0] + (this.a_config[1] ? ' ('+ this.a_config[1] + ')' : '')) + '"', 10);
}

function item_init () {
var a_offset = [],
o_current_item = this.o_parent;
for (var i = this.n_depth; i > 1; i--) {
a_offset[i] = '<img src="' + this.o_root.a_tpl[o_current_item.is_last() ? 'icon_e' : 'icon_l'] + '" border="0" align="absbottom">';
o_current_item = o_current_item.o_parent;
}
return '<table cellpadding="0" cellspacing="0" border="0">' +
'<tr><td nowrap>' + (this.n_depth ? a_offset.join('') +
(this.a_children.length ? '<a onfocus=this.blur() href="" onClick="trees[' + this.o_root.n_id + '].toggle(' + this.n_id + '); trees[' + this.o_root.n_id + '].select(' + this.n_id + ');return false" ' +
'onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')"><img src="' + this.get_icon(true) + '" border="0" align="absbottom" name="j_img' + this.o_root.n_id + '_' + this.n_id + '"></a>'
: '<img src="' + this.get_icon(true) + '" border="0" align="absbottom">') : '') +
'<a href="' + this.a_config[1] + '" target="' +
this.o_root.a_tpl['target'] +
'" onfocus=this.blur(); onclick="trees[' + this.o_root.n_id + '].toggle2(' + this.n_id + ');return trees[' + this.o_root.n_id + '].select(' + this.n_id + ')" onmouseover="trees[' + this.o_root.n_id + '].mover(' + this.n_id + ')" onmouseout="trees[' + this.o_root.n_id + '].mout(' + this.n_id + ')" class="t' + this.o_root.n_id + 'i" id="i_txt' + this.o_root.n_id + '_' + this.n_id + '"><img src="' + this.get_icon() + '" border="0" align="absbottom" name="i_img' + this.o_root.n_id + '_' + this.n_id + '" class="t' + this.o_root.n_id + 'im">' + this.a_config[0] +
'</a></td></tr></table>' +
(this.a_children.length ? '<div id="i_div' + this.o_root.n_id + '_' + this.n_id + '" style="display:none"></div>' : '');
}

function item_get_icon (b_junction) {
return this.o_root.a_tpl['icon_' + ((this.n_depth ? 0 : 32) + (this.a_children.length ? 16 : 0) + (this.a_children.length && this.b_opened ? 8 : 0) + (!b_junction && this.o_root.o_selected == this ? 4 : 0) + (b_junction ? 2 : 0) + (b_junction && this.is_last() ? 1 : 0))];
}

var trees = [];
get_element = document.all ?
function (s_id) { return document.all[s_id] } :
function (s_id) { return document.getElementById(s_id) };

var manageall=false
function expand_or_collapse_all (o_tree, b_collapse) {
manageall=true
for (var i = 1; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index[i];
o_item.open(b_collapse);
}
manageall=false
}

function expand_or_collapse_level (o_tree, level) {
for (var i = 1; i < o_tree.a_index.length; i++) {
var o_item = o_tree.a_index[i];
if (o_item.n_depth==level) o_item.open(true);
}
}



aaaaaaaaaaaaiii