Javascript Tree Menu Tutorial by Deluxe-Tree.com
Javascript Tree Menu Tutorial


Buy Now!  Free Trial Download

Menu Screenshots Javascript Tree Menu Tutorial

Javascript Tree Menu Tutorial Tree Popup Code

Features Javascript Tree Menu Tutorial

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
Tree Drop Menu Mouseover Javascript Tree Menu Tutorial
Easy Setup
  • De Luxe Tuner. GUI interface to create your javascript tree menu tutorial menus easily and in no time
  • Sensible menu parameters for manual editing
Cost Effective
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
Buy Now!  Free Trial Download

Javascript Tree Menu. Expandable Menu.

  • Tune menu parameters manually or using Deluxe Tuner. Then add several rows of a code within html page - your menu is ready!
  • Use special JavaScript functions for: Dynamic changing of items (text, link, icons and even individual style!). Making a menu item active/disabled. Addition/removing of items. Changing of visibility of items. Collapsing/expanding of items. Getting the information on any menu, submenu and items. Other tricks. But for all that it's not necessary to insert any additional code into all the pages - just specify some additional parameters of the menu.

Recent Questions Javascript Tree Menu Tutorial

Q: I purchased the most recent version of "JavaScript Tree Menu & Tree & Tabs & Window Multiple Website License", and now can't open menus from previous versions. When I try to open a custom drop down menu that was created in an older version, I get the error:

Can't open the file:
c:\webs\ltron\ltronmenudata.js
Check youre encode parameter

This happens on all of the older menus that we're trying to update............Do I have to run some type of conversion program on older menu files?

Please let me know as quickly as possible.........we have over 100 custom drop down menus out there and now it seems that we can't edit them!

A: This message means that you should change the encoding:

"Tools/Use utf8 encode"

Change this setting and then open your data files.



Q: How can make my html vertical tabs to open internet link in the same window?

A: You should set the following paramter in your data.js file (file, created in Deluxe Tuner),
where your tab-menu parameters (vars) and items (  var bmenuItems) are placed.

  var bitemTarget = "_blank";

Default target for all items ("_self","_blank","_parent","_top",...).
If equal to "" - defined as "_self".

Or you can set target parameter in your data file using Deluxe Tuner:
"Tab mode" section in the menu parameters list.

Q: I am trying to figure out how to specify the css for the top css dropdown menu.

I saw this in some of the example code, but there was nothing similar in Deluxe Tuner

  var itemStyles = [

["CSS=topItemNormal,topItemOver","CSSText=topItemTextNormal,topItemTextOver" ],
];
  var menuStyles = [
["CSS=topMenu"],
];

I tried adding the above to my js code, but it didn't work. I can get it to work in non-css through Deluxe Tuner.

I am trying to draw a white border around the blue css dropdown menu

.topMenu
{
background-color:Blue;
border-width: 1px;
border-style: solid;
border-color: White;
}

/* Style for submenus */
.submenu
{
}

/* Style for top items: normal state */
.topItemNormal
{
background-color:Blue;
color:White;
text-decoration: none;
text-transform:none;
font-weight:normal;
FONT-SIZE: 11pt;
FONT-FAMILY: Verdana, Arial;
width:100%;
padding:2px 4px;
}

A:   var itemStyles = [

["CSS=topItemNormal,topItemOver","CSSText=topItemTextNormal,topItemTextOver"],
];
  var menuStyles = [
["CSS=topMenu"],
];

The following code is Individual Styles. You can edit them in DeluxeTuner.

Open your data file, click "Edit Individual Styles..." button on themain window. And create individual item style and individual submenustyle. Then you should assign these styles to your items.

See more info about Individual Styles here:
http://deluxe-menu.com/individual-styles-sample.html



Q: Is there a way to have the menu stay expanded in the same exact state when
I click on a menu item of the javascript tree view and go to a new page?

A: There is no need to write additional code on a server side to remember what items were expanded/collapsed.
DHTML Tree Menu can save items state automatically.
Please, see the example of the menu that works with cookies:
http://dhtml-menu.com/tree-examples/tree-menuxp-save-state.html

Set the following parameter:

  var tsaveState = 1;

and the menu remembers its structure for each user who visit your page.
Try to expand/collapse items. Then reload the page and you'll see results.