Template: Javascript Recursive Tree Menu

Tree Javascript MSDN Library Look and Feel

The template emulates emulates MSDN Library look. To open submenus click on menu items.
The appearence of this template is determined by the following parameters:

    - Toggle-mode support.
    - Icons for expand and collapse buttons
    - Animation effect for subitems
    - Only one item can be expanded at the same time, var tcloseExpanded=1;
    - Menu has a static position and is placed within the table cell

Key features:

    - Status string shows item labels
    - Relative/Absolute menu position
    - Filters and Transitional effects
    - Items with icons
    - Submenus expand/collapse on mouseover
    - Movable and floatable menu
    - Vertical orientation of the Tree Menu
    - Several menus on one page

Menu Screenshots Javascript Recursive Tree Menu

Buy Now! :: Free Trial Download :: More Info

Features Javascript Recursive Tree Menu

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

Tree Drag Select Image Javascript Recursive Tree Menu

Professional Look-n-feel

Entirely customizable look-n-feel
A lot of pre-designed javascript recursive tree menu samples
Hundreds of visual effects
Custom CSS styles can be applied for all menu settings

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".

Easy Setup

De Luxe Tuner. GUI interface to create your javascript recursive tree menu menus easily and in no time
Sensible menu parameters for manual editing

Buy Now! :: Free Trial Download :: More Info

Javascript Tree Menu. Expandable Menu.

You can set default expanded/collapsed items and submenus.
After clicking on menu item selected item becomes highlighted.
When the submenu is larger than the visible area of the page the submenu will be automatically decreased. To see all the submenu items you do not need to use scrollbars or something like that - just put your mouse to the bottom of a submenu and it will be automatically scrolled! You can also specify height and width for each separate submenu.
There is no need to write additional code on a server side to remember what items were expanded/collapsed. Javascript/DHTML Tree can save items state automatically!

Buy Now! :: Free Trial Download :: More Info

Recent Questions Javascript Recursive Tree Menu

Q: I have downloaded the trial version and so far I really like what I see except for one issue. Any page that includes the following doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

seems to break the absolute positioning of the menu and sends it to the far upper left corner of the page. Any help on fixing this would be greatly appreciated.

A: The problem is in <!DOCTYPE> attribute.

Please, set 'px' units for posX and posY parameters,for example:

var posX="100px";
var posY="100px";

Q: How do you center the text within the top-level cels in the drop down navigation bar?

A: You should set the following parameter:

var itemAlignTop="center";

Q: If I wanted to change the graphics at a later date in tab menu javascript (main top tabs, subtabs, etc.), how would I do that?

A: In that case you should open images I'm using for top tabs in any graph editor and changethem.

back.gif
back_o.gif //back images for normal and hover states for the last tabs in the top menu(instead of the 1-st 6 items)

sep_top.gif // separator for the top items

top1.gif
top1_o.gif //back images for normal and hover states for the 1-st tab, you can change thetext of this tab in deluxe-menu.js:

["MAIN Initiative (Strategy)","testlink.html", "", "", "", "", "5", "4", "", "", "", ],

By the way to apply hint for this item you should write:
["MAIN Initiative (Strategy)","testlink.html", "", "", "This hint appears when you hover over the 1-st item", "", "5", "4", "", "", "", ],

top2.gif
top2_o.gif //back images for normal and hover states for the 2-nd tab, you can change thetext of this tab in deluxe-menu.js:
["PAIN Identified (Problems)","", "", "", "", "", "6", "", "", "", "", ],

and so on...

For the subtabs I'm use images for arrows only:
 var arrowWidthSub=8;
 var arrowHeightSub=8;
 var arrowImageSub=["deluxe-menu.files/arrow.gif","deluxe-menu.files/arrow_o.gif"]

Q: Does Delux Menu/Tree/bar Tabs work on a Mac? can't seem to get it to work... normally am PC person.

A: To create your menu on MAC you can use HTML version of Deluxe Tuner (for MAC OS). You can find it here:http://deluxe-menu.com/deluxe-tuner-info.html

Unfortunately we don't have html version of the Tuner for Javascript/DHTML Treeand Deluxe Tabs now. We'll try to create it in the nearest future.

All Deluxe products work fine in all Safari browsers.

Buy Now! :: Free Trial Download :: More Info