Template: Javascript Progressive Enhancement Tree Menu

XP Style Olive Floatable Menu Tree

Floating Menu Tree
- When the page is scrolled the menu remains visible (parameter: var tfloatable).
Try to scroll the page.
- The menu can "float" along one or two coordinate axes with different speed
(parameters: var tfloatableX, var tfloatableY, var tfloatIterations).

Key features:

    - Status string shows item labels
    - Submenus automatically scrolls
    - Unlimited number of sub levels
    - Filters and Transitional effects
    - Personal CSS styles for separate menu elements
    - Items with icons
    - Image arrows
    - Relative/Absolute menu position

Menu Screenshots Javascript Progressive Enhancement Tree Menu

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

Features Javascript Progressive Enhancement Tree Menu

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

Professional Look-n-feel

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

Tree Example Code Dropdown Menu Javascript Progressive Enhancement 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

Easy Setup

De Luxe Tuner. GUI interface to create your javascript progressive enhancement 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 create any style for XP menu:
different icons, colors, and buttons for each submenu title;
any color for borders, backgrounds, and font of menus and items;
any available font style; and many other options!
Design personal styles for any submenu and item. Use individual styles to rich killer visual effects!
These effects will make your menu neat and chic. Among available special visual effects there are random dissolve, fade, mix, mosaic slide out and many many others.

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

Recent Questions Javascript Progressive Enhancement Tree Menu

Q: How do you center the text within the top-level menu cels in the menu java script?
There doesn't seem to be a setting for it in the tuner. There's a justification option for the sub-menus, but not for the top.

A: Use the following parameter to specify align for the top items:

var itemAlignTop="center";

Q: If I don't set   var tabMode=1 instead of   var tabMode=0 in drop menu maker the links will not work at all.

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

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

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: The pop-up windows are loading as the page loads, as well as when you click the appropriate object.
How can we prevent the pre-loading of html popups so that they only load onclick?

A: In that case you shouldn't set openAfter and closeAfter parameters.

So, you'll have:

deluxePopupWindow.attachToEvent(win,',,,,,')
or
deluxePopupWindow.attachToEvent(win,'openAfter=,closeAfter=,,,,')

See the following example:
http://deluxepopupwindow.com/html-popup-dialog-vista-graphite.html

Q: Hello.How do I remove the 5 dashed lines that appear above the first treeof the Deluxe-Tree. These lines also appear in your XP StyleSamples but they don't appear in your Deluxe-tree homepage.

http://deluxe-tree.com/data-samples/tree-menuxp2.html

A: These lines appears when you use

var tmoveable = 1; //movable menu

Try to set

var tmoveable = 0;

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