Editable Tree Js by Deluxe-Tree.com
Editable Tree Js


Buy Now!  Free Trial Download

Menu Screenshots Editable Tree Js

Editable Tree Js Tree Menus Code

Features Editable Tree Js

Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed editable tree js samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
High Performance
  • AJAX menu loading - loads web menu data from the server "on-the-fly".
  • Commonly loads quicker than other html page elements
  • Runs well with an unlimited number of submenus and items
Navigation Trees Editable Tree Js
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".
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
Cost Effective
Buy Now!  Free Trial Download

Javascript Tree Menu. Expandable Menu.

  • Good navigation system is an important part of web site success. If people can't find their way around the site, they will rapidly give up looking and go, never to return. So, it's very significant that your website has a neat, fast, and gratifying to the eye navigation.
    Don't permit your web site visitors to get lost. Try Javascript/DHTML Tree!

Recent Questions Editable Tree Js

Q: I have generated my navigation menu bar and want to incorporate it into my current website.
How do I resize and position the navigational menu inside a table?


A: 1) Resize:
You could specify exact width for menu using that parameter:

  var menuWidth="400px";

You can also set exact width for each top item using Individual Item Styles:

  var itemStyles = [ ["itemWidth=120px"],];

  var menuItems = [ ["Item 1","", "", "", "", "", "0", "", "", ],
["Item 2","", "", "", "", "", "0", "", "", ],
["Item 3","", "", "", "", "", "0", "", "", ],
["Item 4","", "", "", "", "", "0", "", "", ],
["Item 5","", "", "", "", "", "0", "", "", ],
];

2) Position the navigational menu inside a table:
You can paste the menu inside the <div> or <table> tag, for example:

<DIV align=center>
<SCRIPT src="data/data.js" type=text/javascript>
</SCRIPT>
</DIV>


<table width=800>
<tr>
<td align=center width=600><script type="text/javascript" src="data/data.js"></script></td>
</tr>
</table>


Q: Can I choose what items will be expanded or collapsed in the php tree view
when the user first comes to the webpage?

A: You can expand some items by default.
Add '+' sign before items text in that case:

["+Javascript/DHTML Tree: XP Style","", "deluxe-tree.files/xpicon1_s.gif", "", "", "XP Title Tip", "", "0", "", "", ],
 ["|Home","testlink.htm", "deluxe-tree.files/icon1_s.gif", "deluxe-tree.files/icon1_so.gif", "", "Home Page Tip", "", "", "", "data-new.js", ],

"Javascript/DHTML Tree: XP Style" item will be expanded by default in that case.

Use   var texpanded=1; parameter to expand all menu items by default.

Use function dtreet_ext_expandItem (itemID, expand) API function to expand the specificmenu items dynamically:
http://deluxe-tree.com/functions-info.html

Q: I am having great problems making my tab working, I seems to select the second tab by default.

I have looked in your frequent asked questions and tried the below suggestion, I have not used the registered domain as I am in the process of design.

  var bselectedItem = 3;

Where 3 is the number of your menu item from the   var bmenuItems parameter.
  var bmenuItems =
[
["Mac Tab 1", "content1"],
["Mac Tab 2", "content2"],
["Mac Tab 3", "content3"],
["Mac Tab 4", "content4"], // selected tab
];
The ID of the item starts with 0.
Try that.

But without success?

Any idea?

Please advice


A: See, the ID of the item starts with 0.

So, if you use TabMode (  var tabMode=1;):

  var bselectedItem = 10;

["-", ] - separator, ID = 0
["Mac Tab 1", "content1"], ID = 1
["Subitem1","testlink.html",] ID = 2
["Subitem2","testlink.html",] ID = 3
["Mac Tab 2", "content2"], ID = 4
["Subitem1","testlink.html",] ID = 5
["Subitem2","testlink.html",] ID = 6
["Mac Tab 3", "content3"], ID = 7
["Subitem1","testlink.html",] ID = 8
["Subitem2","testlink.html",] ID = 9
["Mac Tab 4", "content4"], // selected tab ID = 10
["Subitem1","testlink.html",] ID = 11
["Subitem2","testlink.html",] ID = 12

If you use tabs (  var tabMode=0;):

  var bselectedItem = 2;

["-", ] - separator, ID = 0
["Mac Tab 1", "content1"], ID = 1
["Mac Tab 2", "content2"], ID = 2 // selected tab
["Mac Tab 3", "content3"], ID = 3
["Mac Tab 4", "content4"], ID = 4


Q: What I want to do is use your XP Tabs Template.
It appears fine in the Preview Pane but when I load it on my web page the sub-items are all listed on the same line as the tabs.

A: If you want to create subtabs in your menu you should use Tab Mode
  var tabMode=1;
and write your bmenuItems in the following way:

  var bmenuItems = [

["-","", "", "", "", "", "", "", "", ],
["XP Tab 1","content1", "", "", "", "", "", "", "", ],
["XP Tab 2","content2", "", "", "", "", "", "", "", ],
 ["|SItem 226","", "", "", "", "", "", "", "", ],
["XP Tab 3","content3", "", "", "", "", "", "", "", ],
 ["|SXP Tab 4","content4", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "", "", "", ],
];
but in that case you can't assign the ID of the DIV to show when youclick on the tab. You can set the links only.