Mac Book Style Tree Menu by Deluxe-Tree.com
Mac Book Style Tree Menu


Buy Now!  Free Trial Download

Menu Screenshots Mac Book Style Tree Menu

Mac Book Style Tree Menu Tree Folding Tree Menu

Features Mac Book Style 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
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed mac book style tree menu samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Tree Dropdown Menu Mac Book Style Tree Menu
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
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".
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.

  • You can animation and effects for the javascript tree menu. These effects will make your menu more attractive and stylish. When you click on titles of submenus - submenus will collapse or expand. Submenus have a fade effect in Internet Explorer when you collapse/expand them, so your menus look like original menus in Windows XP Explorer. You can set different speed for an animation.

Recent Questions Mac Book Style Tree Menu

Q: What I would like to see is the ability to have a base site navigation menu with all the definitional entries (size, locations, icons, etc.) defined but all the menuitems be called from an Ajax file.

A: You cannot use ajax submenus for the top items.
But you can use several .js file, for example:

params.js //file with all menu parameters (size, locations, icons, etc.)
all code before
  var menuItems = [
...
];
dm_init();

data_ajax1.js //data files for ajax submenus
data_ajax2.js
data_ajax3.js
...

main_data.js - data file with the following code:

  var menuItems = [
["Item 1","", "", "", "", "", "0", "0", "data_ajax1.js", "", "", ],
["Item 2","", "", "", "", "", "0", "0", "data_ajax2.js", "", "", ],
["Item 3","", "", "", "", "", "0", "0", "data_ajax3.js", "", "", ],
["Item 4","", "", "", "", "", "0", "0", "data_ajax4.js", "", "", ],
];
dm_init();

You can also place this code into your html page directly (in the place where you want tohave a menu):

<script type="text/javascript">
  var menuItems = [
["Item 1","", "", "", "", "", "0", "0", "data_ajax1.js", "", "", ],
["Item 2","", "", "", "", "", "0", "0", "data_ajax2.js", "", "", ],
["Item 3","", "", "", "", "", "0", "0", "data_ajax3.js", "", "", ],
["Item 4","", "", "", "", "", "0", "0", "data_ajax4.js", "", "", ],
];
dm_init();


Q: Does your menu html javascript support Arabic language fonts?

A: Actually you can use any letters in the menu.
Please, check that you've set "Tools/Use utf8 encode".
When you save your data file in UTF8 you should use the same encoding on our html page.
So you should write:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

If you don't want to use UTF-8 encode on your page you should turn off"Tools/Use utf8 encode" property, save your data file and manuallychange your letters in any text editor.


Q: Now it works fine in Firefox and mostly in IE.... Only problem... In IE...

When the page with dhtml tab menu first loads ... It does not load the content of the first DIV....
It's fine in Firefox...now IE just does not load the first div... I've tried added a JS function to set to visible the first DIV onLoad...but that does not work either...

Is there anyway to hard-code in ...to set the first DIV to visible?

A: I've just checked your website. Your dhtml tab menu work correctly.

You should check that you use correct value of
  var bselectedItem=1;
parameter.

That is mean that second item in menuItems array will be highlighted.
["-","", "", "", "", "", "", "", "", ], //0
["About","content1", "", "", "", "", "", "", "", ], //1
["FAQs","content2", "", "", "", "", "", "", "", ], //2
["Before & Afters","content3", "", "", "", "", "", "", "", ], //3
["Pre/Post Care","content4", "", "", "", "", "", "", "", ], //4
["Special Offers","javascript:location.href = '../specials/index.htm'", "", "", "", "", "", "", "", ], //5

Now you have also:
<script type="text/javascript" src="data-deluxe-tabs.js"></script>

<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr>

<td align=center valign=top>

<table cellpadding="0" cellspacing="0" border="0" width=500 height=250 align=center>
<tr>
<td valign=top height=1>
<script type="text/javascript" src="../scripts/templates/tabs-opera.js"></script>
</td>
</tr>

I think that it is not correct. You should write:

<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr>

<td align=center valign=top>

<table cellpadding="0" cellspacing="0" border="0" width=500 height=250 align=center>
<tr>
<td valign=top height=1>
<script type="text/javascript" src="data-deluxe-tabs.js"></script>
</td>
</tr>



Q: There's no explanation of what to do after creating a dhtml menu example or where to paste the code, which files to upload..

A: 1. Create your menu in Deluxe Tuner.

When you open Deluxe Tuner you can click "File/New"
and add items and subitems using buttons "Add Item" and "Add Subitem" on
the main window.
You should set items and subitems parameters on the "Item Parameters"window.
See also other parameters for the menu on the main window.

More info about menu parameters you can find on our site

http://deluxe-tree.com/parameters-info.html
http://deluxe-tree.com/menu-items-info.html

You can also use Individual Styles for items and subitems

http://deluxe-tree.com/individual-item-styles-info.html
http://deluxe-tree.com/individual-submenu-styles-info.html

2. You should install the menu on your page.
You can click, for example, File/Export to HTML (you can't do it inthe MAC version).
Save your data file.
Add several rows into your html page.

<head>
...
<!-- JavaScript Tree Menu -->
<noscript><a href="http://deluxe-menu.com">Javascript Menu by Deluxe-Menu.com</a></noscript>
<script type="text/javascript">  var WorkPath="deluxe-menu.files/";</script>
<script type="text/javascript" src="deluxe-menu.files/dmenu.js"></script>
...
</head>

<body>
...
<table>
&tr><td>%lt;script type="text/javascript" src="deluxe-menu.files/data.js"></script></td></tr> //data.js - data file created in Deluxe Tuner.
</tablegt;
...
</body>

You should also copy all engine files
dmenu.js
dmenu4.js
dmenu_add.js
dmenu_dyn.js
dmenu_key.js
dmenu_cf.js
dmenu_popup.js
dmenu_ajax.js
dmenu_search.js

into "deluxe-menu.files/" folder. You should place this folder in the
same folder with your index.html page.

Try that.