Template: Simple Javascript Tree Node Examples

Vista Style 3 Tree Menu Script

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:

    - 3-state icons for each item
    - Status string shows item labels
    - Submenus expand/collapse on mouseover
    - Inactive/Disabled items
    - Submenus have a fade effect
    - Relative/Absolute menu position
    - Submenus automatically scrolls
    - Several menus on one page

Menu Screenshots Simple Javascript Tree Node Examples

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

Features Simple Javascript Tree Node Examples

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

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

Floating Tree Menu Simple Javascript Tree Node Examples

Professional Look-n-feel

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

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 simple javascript tree node examples menus easily and in no time
Sensible menu parameters for manual editing

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

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!

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

Recent Questions Simple Javascript Tree Node Examples

Q: The problem is now that I have a scroll bar in the main menus although there is nothing to scroll.

Do you have any ideas?

A: You've set the exact width and height for submenus.

  var smWidth = "100";
  var smHeight = "250px";
  var menuStyles = [
["smWidth=220px","smHeight=250px"],
["smWidth=200px","smHeight=250px"],
["smWidth=120px","smHeight=250px"],
];

Try to write:

  var smWidth = "";
  var smHeight = "";
  var menuStyles = [
[""],
[""],
[""],
];
There will be no scroll bar in the main menus.

Q: Can Deluxe menus work with tables?

A: Yes, you can place your menu into the <div> or <table> tag.

For example:

<table>
    <tr>
       <td><script type="text/javascript" src="menudir/data.js"></script></td>
   </tr>
</table>

Q: Thanks for swift reply, however:
Tried the dmenu.js (only one we use) at our trial site and get the error :
Line 13
Invalid argument

- as you know this js file is obfuscated to one line, so using a debugger does not apply.

A: See the attached example. I've upgraded your javascript layer menu to JavaScript Tree Menu v3.0.
use data file and engine files from the attachment.

You had several errors in the structure of menuItems.

It is not correct to write

["| Contact us","http://www.imarex.com/home/contact_us","","","","","8","","",],
["||| Energy team","http://www.imarex.com/home/contact_us/energy_team","","","","","8","","",],

You should write:
["| Contact us","http://www.imarex.com/home/contact_us","","","","","8","","",],
["|| Energy team","http://www.imarex.com/home/contact_us/energy_team","","","","","8","","",],

Q: I would like to make the main bar for the menu javascripts more consistent in the spacing.

A: Try to set exact width for each top menu item using Individual Styles:

var itemStyles = [
["itemWidth=131px"], //style0
];

var menuItems = [

["home","", "", "", "", "", "0", "", "", "", "", ], //style0
["artist index","", "", "", "", "", "0", "", "", "", "", ], //style0
["the gallery","", "", "", "", "", "0", "", "", "", "", ], //style0

];

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