Template: Usando Obout Treeview

XP Style Olive Floatable Menu Tree

Floating Menu Tree
- When the page is scrolled the menu remains visible (parameter: var tfloatable).
Try to scroll the page.
- The menu can "float" along one or two coordinate axes with different speed
(parameters: var tfloatableX, var tfloatableY, var tfloatIterations).

Key features:

    - Relative/Absolute menu position
    - Submenus have a fade effect
    - Vertical orientation of the Tree Menu
    - Several menus on one page
    - Movable and floatable menu
    - Personal CSS styles for separate menu elements
    - Status string shows item labels
    - Submenus expand/collapse on mouseover

Menu Screenshots Usando Obout Treeview

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

Features Usando Obout Treeview

Easy Setup

De Luxe Tuner. GUI interface to create your usando obout treeview menus easily and in no time
Sensible menu parameters for manual editing

Cost Effective

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

Tree Navigation Menus Usando Obout Treeview

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

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".

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 :: More Info

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.

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

Recent Questions Usando Obout Treeview

Q: Looks like submenu text for the rollover menus is too long for the background.
How can I ensure the background is the same length as the longest word in my submenu list for the rollover menus?

A: Try to change the following parameter:

var smWidth="100%";

Set it:

var smWidth="";

Q: Shall I have to call the main egine file of the javascript menu maker - dmenu.js twice if I want to install two menus on the page.

The second script:
<script type="text/javascript" src="datatopnav.files/dmenu.js"></script>

Is for the top navigation menu, the datahscounseling is for the side menu. If I delete that line won't my top navigation be gone?

A: No, when you have several menus on the same page you should calldmenu.js file only once and then call several data files.

You should install the menus in the following way:

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

<script type="text/javascript" src="datatopnav.files/dmenu.js"></script>

...
</head>
<body>
...
<TD height=25 colSpan=3 class=style1>
<script type="text/javascript" src="datatopnav.js"></script></TD>
...
<td width="180" height="307" rowspan="2" valign="top" bgcolor="ffffff"><div align="left">
<script type="text/javascript" src="datahscounseling.js"></script></DIV>
...
</body>

Both menu will work correctly in that case.

See the example I've sent you. It works fine.

You can find more info about installation of several menus on thesingle page:

http://deluxe-menu.com/installation-info.html

Q: In the javascript pulldown menu submenu width seems not to work in FF...

A: You should specify units in "px".
var itemStyles = [
["itemWidth=208px"],
];
var menuStyles = [
["smHeight=200px"],
];

Q: I donґt understand how may I include content in dhtml tabbed menu.
May you send to meexamples or more information?

A: 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", "", "", "", "", "", "", "", ],

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

<div id="content1" style=" visibility: hidden;" class="tabPage">
<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">
<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">
<p align=center><img src="img/logo_DTabs.gif" width=254 height=58 alt="Deluxe-Tabs.com"></p>
</div>

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", "", "", ],

You can use Object ID as well as Link in both modes. Use the following prefixes within item's link field:
"object:" - means that there is object id after it;
"link:" - means that there is a link after it.
"javascript:" - means that there is a javascript code after it, for example:javascript:alert(\'Hello!\')

So, you should write for example:
["|Link 1_1","object:Content1_1", "", "", "", "", "0", "", "", ],

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