Template: Pure Css Tree Menu

Dhtml Treeview Menu Vista Style 1

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
    - Relative/Absolute menu position
    - different speed for an animation for submenus
    - Each item can have individual settings
    - Items with icons
    - Submenus automatically scrolls
    - Status string shows item labels
    - Unlimited number of sub levels

Menu Screenshots Pure Css Tree Menu

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

Features Pure Css Tree Menu

Professional Look-n-feel

Entirely customizable look-n-feel
A lot of pre-designed pure css tree menu 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

Tree Drop Down Men Pure Css Tree Menu

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

Cost Effective

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

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

Javascript Tree Menu. Expandable Menu.

You can set the size of the menu in pixels, percent or other units. The menu may have an absolute or relative position (it can be inserted into the table).
Use any necessary font of any color, size and font decoration. Create any available type, thickness and color of a menu.Choose any color for backgrounds of submenus and items. Use special prefixes for image paths and links to make paths absolute.
You can assign your own images for lines.

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

Recent Questions Pure Css Tree Menu

Q: We are looking for documentation on how to use the onmouseover tab program. We purchased this also and we were not able to figure out the deluxe tab part.

A: You can find all documentation on our website, http://deluxe-tabs.com.

You should paste your content in the <div> .. </div> tags.

<div id="content1" style=" visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DM.gif" width=262 height=56 alt="Deluxe-Menu.com"></p>
</div>

<div id="content2" style="visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DT.gif" width=262 height=56 alt="Deluxe-Tree.com"></p>
</div>

<div id="content3" style=" visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/logo_DTabs.gif" width=254 height=58 alt="Deluxe-Tabs.com"></p>
</div>

See in Deluxe Tabs there are two modes:

1. var tabMode=0;
You can create only one level of tabs and assign Object Id's of theDIV's to show when you click on the tab.

["XP Tab 1","content1", "", "", "", "", "", "", "", ],
["XP Tab 2","content2", "", "", "", "", "", "", "", ],
["XP Tab 3","content3", "", "", "", "", "", "", "", ],
["XP Tab 4","content4", "", "", "", "", "", "", "", ],

2. var tabMode=1;
You can assign only links in this mode.
You should create top level items with subitems.

["XP Tab 1","", "", "", "", "", "", "", "", ],
["|Link 1_1","http://deluxe-tabs.com", "", "", "", "", "0", "", "", ],
["|Link 1_2","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 1_3","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 1_4","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 1_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 2","", "", "", "", "", "", "", "", ],
["|Link 2_1","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 2_2","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 2_3","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 2_4","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 2_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 3","", "", "", "", "", "", "", "", ],
["|Link 3_1","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 3_2","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 3_3","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 3_4","testlink.htm", "", "", "", "", "0", "", "", ],
["|Link 3_5","testlink.htm", "", "", "", "", "0", "", "", ],

Q: May I know what's the upgrade policy for these javascript menu scripts?

A: All minor upgrades you'll get for free (for example, 1.5->1.7).
All major upgrades you'll get for free during 1 year (for example, 1.7->2.0).

For example, if there's some major upgrades (1.7 -> 2.0 -> 4.0)you'll get them for free during one year.

But if there'll be no major upgrades during some period (1.72 -> 1.81 -> 1.92). And after 3 year, for example, there will be major upgrade to 2.0. So you can upgrade for free.

We can offer you some discount for the major upgrade of javascript menu scripts after one year.

Q: I have inherited a project to finish which makes use of your java script tree menu.

I have not used your product. Is there a user’s guide/manual I can download?

A: Unfortunately we don't have step by step tutorial yet.
We'll try to create it in the nearest time.

1. Create your menu in Deluxe Tuner application.You can create any menu you like in Deluxe Tuner.

Deluxe Tuner v3.0 supports JavaScript Tree Menu (http://deluxe-menu.com) &Javascript/DHTML Tree (http://deluxe-tree.com) & Deluxe Tabs (http://deluxe-tabs.com)

You can use ready to use templates. You can find them in the templateswindow.

When you open Deluxe Tuner ( Javascript/DHTML Tree ) you can click "File/New"and add items and subitems using buttons "Add Item" and "Add Subitem" onthe main window.
You should set items and subitems parameters on the "Item Parameters"window.
See also other parameters for the java script tree 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 java script tree menu on your page.
You can click, for example, File/Export to HTML (you can't do it inthe MAC version).

Add several rows into your html page.

<head>
...

<noscript><a href="http://deluxe-tree.com">Javascript Tree Menu by Deluxe-Menu.com</a></noscript>
<script type="text/javascript"> var tWorkPath="deluxe-tree.files/";</script>
<script type="text/javascript" src="deluxe-tree.files/dtree.js"></script>
...
</head>

<body>
...
<table>
<tr><td><script type="text/javascript" src="deluxe-tree.files/data.js"></script></td></tr> //data-deluxe-tree.js - data file created in Deluxe Tuner.
</table>
...
</body>

You should also copy all engine files
dtree.js
dtree_add.js
dtree_dyn.js
dtree_ajax.js
into "deluxe-tree.files/" folder. You should place this folder in thesame folder with your index. html page.

Try that.

Q: I want that this tree expanded or collapsed (clicking on the image. e.g. like the right button) and go to the link when clicked on the item.

A: No problem.
You can assign a link to the item that has subitems.
When you'll click on item's button, it'll be expanded.
When you'll click on the item, item's link will be opened.

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