3 Depth Level Tree Javascript by Deluxe-Tree.com
3 Depth Level Tree Javascript


Buy Now!  Free Trial Download

Menu Screenshots 3 Depth Level Tree Javascript

3 Depth Level Tree Javascript Tree Horizontal Menu Tree

Features 3 Depth Level Tree Javascript

Easy Setup
  • De Luxe Tuner. GUI interface to create your 3 depth level tree javascript menus easily and in no time
  • Sensible menu parameters for manual editing
Unrivalled Features
  • Scrollable, dragable, floating
  • Unique Java Script API for altering menu "on-the-fly", without page reloading
  • AJAX technology - loads menu data from the server "on-fly and on-demand".
Tree Coolmenu 3 Depth Level Tree Javascript
Compatibility              
  • Full cross-browser compatibility including IE, Netscape, Mozilla, Opera, Firefox, Konqueror and Safari on Windows, Mac OS and Linux
  • Menu can be populated from a database using ASP, PHP, etc.
  • Search engine friendly
  • Support for any doctypes
  • Fits for secure sites
Seamless Integration
  • Visible over flash, select boxes, iframes, java applets
  • Multiple menus on the same page
  • Amicable to other scripts and css styles
  • Any HTML code can be used inside menu items
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed 3 depth level tree javascript samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Buy Now!  Free Trial Download

Javascript Tree Menu. Expandable Menu.

  • There can be as many submenus as you want.
  • Use a mouse to drag a menu as a usual window.
  • When the page is scrolled the menu remains visible. The Javascript/DHTML Tree can "float" along one or two coordinate axes. After clicking on menu item selected item becomes highlighted.

Recent Questions 3 Depth Level Tree Javascript

Q: I don't understand how may I include content in each js tab, may you send to me examples or more information??

A: See in Deluxe Tabs there are two modes:

1.   var tabMode=0;
You can create only one level of tabs and assign Object Id's of theDIV's to show when you click on the js tab.

["XP Tab 1","content1", "", "", "", "", "", "", "", ],
["XP Tab 2","content2", "", "", "", "", "", "", "", ],
["XP Tab 3","content3", "", "", "", "", "", "", "", ],
["XP Tab 4","content4", "", "", "", "", "", "", "", ],

You should paste your content in the <div> .. </div> tags.

<div id="content1" style=" visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DM.gif" width=262 height=56 alt="Deluxe-Menu.com"></p>
</div>

<div id="content2" style="visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DT.gif" width=262 height=56 alt="Deluxe-Tree.com"></p>

</div>

<div id="content3" style=" visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DTabs.gif" width=254 height=58 alt="Deluxe-Tabs.com"></p>
</div>

2.   var tabMode=1;
You can assign only links in this mode.
You should create top level items with subitems.

["XP Tab 1","", "", "", "", "", "", "", "", ],
 ["|Link 1_1","http://deluxe-tabs.com", "", "", "", "", "0", "", "", ],
 ["|Link 1_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 2","", "", "", "", "", "", "", "", ],
 ["|Link 2_1","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 3","", "", "", "", "", "", "", "", ],
 ["|Link 3_1","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_5","testlink.htm", "", "", "", "", "0", "", "", ],

You can use Object ID as well as Link in both modes. Use the following prefixes within item's link field:
"object:" - means that there is object id after it;
"link:" - means that there is a link after it.
"javascript:" - means that there is a javascript code after it, for example:javascript:alert(\'Hello!\')

So, you should write for example:

 ["|Link 1_1","object:Content1_1", "", "", "", "", "0", "", "", ],


Q: Where in the interface is there an area to make a tab selected or not for the div tab menu?


A: You should see the following parameters:

Top items
  var bselectedItem=1; //--- Common

Submenus
  var bselectedSmItem=10; //--- Tab-mode



Q: Couple last questions. I have 25 icons (images) on one page. Each image needs it's own popup menu. Obviously I now have the first one working. How and where do I define IDs number 2-24 ? Does each icon need it's own "source_" file?

Also, where is it defined that the popup menu is ID 1 ?


A: > Also, where is it defined that the popup menu is ID 1 ?
Each menu has ID. The ID's number starts with 0.

So, when you have several data files on your page you have such ID's:

<script type="text/javascript" language="JavaScript1.2" src="menu-top.js"></script> // ID - 0

<script type="text/javascript" language="JavaScript1.2" src="source_pop.js"></script> // ID - 1

<script type="text/javascript" language="JavaScript1.2" src="source_pop1.js"></script> // ID - 2

<script type="text/javascript" language="JavaScript1.2" src="source_pop2.js"></script> // ID - 3

<script type="text/javascript" language="JavaScript1.2" src="source_pop3.js"></script> // ID - 4

and so on.

> I have 25 icons (images) on one page. Each image needs it's own popup menu.
If you want to have different Popup menus (there color, item, text,font and so on) you should create 25 different .js files with yourparameters. And call them from your page, for example:

<SCRIPT language=JavaScript1.2 src="source_pop.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript1.2 src="source_pop1.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript1.2 src="source_pop2.js" type=text/javascript></SCRIPT>
...
<SCRIPT language=JavaScript1.2 src="source_pop24.js" type=text/javascript></SCRIPT>

If you have different item text only you can use one
<SCRIPT language=JavaScript1.2 src="source_pop.js" type=text/javascript></SCRIPT>
file. But you should delete the following code:

  var menuItems = [

["Next","testlink.htm"],
["Prev","testlink.htm"],
["Close","testlink.htm"],
];

dm_init();

and move it to the html page:

<body>
...
<SCRIPT language=JavaScript1.2 src="source_pop.js" type=text/javascript></SCRIPT>
<script type="text/javascript"> //first popup menu ID - 1
  var menuItems = [

["Next","testlink.htm"],
["Prev","testlink.htm"],
["Close","testlink.htm"],
];

dm_init();
</SCRIPT>
<script type="text/javascript"> //second popup menu ID - 2
  var menuItems = [

["Text","testlink.htm"],
["Text1","testlink.htm"],
["Text2","testlink.htm"],
];

dm_init();
</SCRIPT>
<script type="text/javascript"> //third popup menu ID - 3
  var menuItems = [

["New_Text","testlink.htm"],
["New_Text1","testlink.htm"],
["New_Text2","testlink.htm"],
];

dm_init();
</SCRIPT>
...
<script type="text/javascript"> //twenty fourth popup menu ID - 3
  var menuItems = [

["New","testlink.htm"],
["New","testlink.htm"],
["New","testlink.htm"],
];

dm_init();
</SCRIPT>

<img src="testimage.gif" width=200 onClick="return dm_popup(1, 1000, event);" style="cursor: hand;">
<img src="testimage.gif" width=200 onClick="return dm_popup(2, 1000, event);" style="cursor: hand;">
<img src="testimage.gif" width=200 onClick="return dm_popup(3, 1000, event);" style="cursor: hand;">
...
<img src="testimage.gif" width=200 onClick="return dm_popup(24, 1000, event);" style="cursor: hand;">
...
</body>



Q: Should it possible to make a meta tag (or script) so the menu don't put anything on the local computer?

A: If you don't want the page will be cached, try to use standard htmltags, for example:


<META http-equiv=Cache-Control content="no-cache, must-revalidate">
<META http-equiv=Pragma content=no-cache>

See more in a HTML manual.