Simple Onclick Javascript Tree Menu by Deluxe-Tree.com
Simple Onclick Javascript Tree Menu


Buy Now!  Free Trial Download

Menu Screenshots Simple Onclick Javascript Tree Menu

Simple Onclick Javascript Tree Menu Tree Menu Scripts

Features Simple Onclick Javascript 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
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 Frames Disabled Simple Onclick Javascript Tree Menu
Cost Effective
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
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
Buy Now!  Free Trial Download

Javascript Tree Menu. Expandable Menu.

  • Good navigation is an important step to website success. If people can't find their way around the site, they will quickly give up looking and leave, never to return. So, it's absolute vital that your website has a fast, neat, and eye-pleasing navigation.
    Don't allow your website visitors to get lost. Try Javascript/DHTML Tree Menu!

Recent Questions Simple Onclick Javascript Tree Menu

Q: I was wondering how do i add more then five items on the top of the select menu javascript rathere then using a sub menu?

A: Actually you can add as many top items as you want.

Use Deluxe Tuner to add more items or add them in your data filemanually, for example:

  var menuItems = [
["Item 1","whatsnew.htm", "Buttons/whatsnewup.jpg", "Buttons/whatsnewover.jpg", "", "", "", "", "", "", "", ],
["Item 2","test.htm", "", "", "", "", "", "", "", "", "", ],
["Item 3","index.htm", "Buttons/homeup.jpg", "Buttons/homeover.jpg", "", "_parent", "", "", "", "", "", ],
["Item 4","about.htm", "Buttons/aboutup.jpg", "Buttons/aboutover.jpg", "", "_parent", "", "", "", "", "", ],
["Item 5","commserv.htm", "buttons/commservup.jpg", "buttons/commservover.jpg", "", "_parent", "", "", "", "", "", ],
["Item 6","conference.htm", "buttons/conferenceup.jpg", "buttons/conferenceover.jpg", "", "_parent", "", "", "", "", "", ],
["Item 7","lodges.htm", "buttons/districtsup.jpg", "", "", "_parent", "", "", "", "", "", ],



Q: There seems to be a "glitch" when I use Firefox.
I have rebuilt the page twice but I always end up with themenu floating to the left, instead of under the main menu (the second or third mouseover will correct the issue). Also, sometimes I have to mouseover twice before the submenu comes up (in I.E.).

I have validated...however I wondered if there could be a conflict in the javascripting (yours and mine). Any suggestions?


A: The reason is in your <!DOCTYPE>.

Try to specify units in "px".
  var menuWidth="780px";
  var menuHeight="27px";
  var smWidth="200px";
  var smHeight="200px";
It's necessary to specify exact value for Mozilla browsers. It helpsto position menus correctly.

You can also try to set the following parameter:
  var dm_writeAll=1;


Q: Can I ask a technical question? I am using the menu in a frameset, and I would like for the drop down menu selected branch to sty highlighted after the user moves the mouse to another window (where the menu brings up a new page), just so the user knows where he/she is. Is that possible?

A: But if you open links in the another frame (window) the initial frame with your menu isnot reloaded, so the clicked item will be highlighted.
You should set the following parameters:
  var ttoggleMode=1;
  var tpressedFontColor="#AAAAAA";

You can also set the following parameter to save menu state:
  var tsaveState=1;
  var tsavePrefix="menu1";

If you install the menu without frames. On your pages you should call the following function/functions to expand/highlight items, for example:

<script>
dtreet_ext_expandItem (dtreet_ext_getItemIDByIndex (0, 0), 1);
dtreet_ext_setPressedItem (0, dtreet_ext_getItemIDByIndex (0, 1));
</script>

See more info about API functions here:
http://www.deluxe-tree.com/functions-info.html
Example:
http://deluxe-tree.com/highlight-selected-menu-item-sample.html


Q: I'm looking at purchasing your product but have one small problem. I'm using the expandable menu and would like to have the menu save the state when reloading or refreshing the browser.
Can this be done with the expandable menu? If so, what is the syntax?


A: I advise you to use Javascript/DHTML Tree, http://deluxe-tree.com/. This is a newer version of Dhtml TreeMenu.

You should use the following parameter:

  var tsaveState = 1;

Example, you can find here:

http://deluxe-tree.com/data-samples/tree-menuxp-save-state.html