Template: Javascript Tree Menu

Vista Style 6 Dhtml Menu Tree

The template emulates Vista OS menu style. To open submenus click on menu items.
The appearence of this template is determined by the following parameters:

    - The menu have XP Style; Animation effect for subitems
    - Toggle-mode support.
    - Items have icons
    - Menu has a static position and is placed within the table cell

Key features:

    - Image arrows
    - Personal CSS styles for separate menu elements
    - different speed for an animation for submenus
    - Several menus on one page
    - Relative/Absolute menu position
    - Submenus have a fade effect
    - Submenus expand/collapse on mouseover
    - Items with icons

Menu Screenshots Javascript Tree Menu

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

Features Javascript Tree Menu

Easy Setup

De Luxe Tuner. GUI interface to create your javascript tree menu 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".

Treemenu Tree Javascript Tree Menu

Professional Look-n-feel

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

Cost Effective

Starts at just $39. Buy Now!
FREE for non-commercial websites. Order Now!
No-limits free trial version. Download Now!

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

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 Tree Menu

Q: Can I request something for your next version please.....individual javascript list menu border colours, I think it would then be possible to create a dropped shadow effect perhaps :)

A: You can use different colors for each border side now.

For example:
var menuBorderColor="#C0AF62 #4949E0 #000000 #B31E1E";

top right bottom left

Q: Does you tree menu javascript support right-to-left layout?
That is to say it opens the branches/submenus from the right to left.

A: Yes it is possible to create a menu for right-to-left languages with Javascript/DHTML Tree in the same way as in standard htmlcode.
Please, set <HTML dir="rtl">. You should set the following parameters:

  var titemAlign="right";
  var ticonAlign="right";
  var texpandBtnAlign="right";

JavaScript Tree Menu support right-to-left languages.
In JavaScript Tree Menu you can set the following parameter:

  var dmRTL = 1;

Set this parameter to 1 if you're using right-to-left direction of html page <HTML dir=rtl>.

Q: I need to know how to have the background in the main menutransparent, and then the sub-menu/s a different translucent color.
Or, the background for the main menu one color, and the sub-menu/s a different color..

A: To set transparent background for the menu you should set:

  var menuBackColor="transparent";
  var itemBackColor=["transparent","transparent"];

and use Individual Item Styles for your submenus:

  var itemStyles = [
["itemBackColor=#8EE8E1,#26BBB0"], //style0
["itemBackColor=#F4B7FB,#E65AF5"], //style1
];

  var menuItems = [

["Home","testlink.html", "", "", "", "", "", "", "", ],
["Product Info","", "default.files/icon1.gif", "default.files/icon1o.gif", "", "", "", "", "", ],
["|Features","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "0", "", "", ], //style0
["|Installation","", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "1", "", "", ], //style1
   ["||Description of Files","testlink.html", "default.files/icon6.gif", "default.files/icon6o.gif", "", "", "", "", "", ],
   ["||How To Setup","testlink.html", "default.files/icon6.gif", "default.files/icon6o.gif", "", "", "", "", "", ],
["|Parameters Info","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "0", "", "", ], //style0
["|Dynamic Functions","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "1", "", "", ], //style0
["|Supported Browsers","", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "0", "", "", ], //style0
   ["||Windows OS","", "default.files/icon3.gif", "default.files/icon3o.gif", "", "", "", "", "", ],
   ["||Internet Explorer","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||Firefox","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||Mozilla","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||Netscape","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||Opera","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||MAC OS","", "default.files/icon3.gif", "default.files/icon3o.gif", "", "", "", "", "", ],
   ["||Firefox","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],

Q: Can youtell me which transition is the regular traditional transition with no effects for the dhtml navigation?

A: You can use
  var transition=0;

if you don't want to use transition you should set:

  var transition=0;
  var transOptions="";
  var transDuration=0;
  var transDuration2=0;

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