Javascript Rollover Subsection Menu by Deluxe-Menu.com
Javascript Rollover Subsection Menu

Menu Screenshots

Javascript Rollover Subsection Menu Menu Collapse Source

Features

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
  • Section 508 compliant
Cost Effective
Scrolling Menue Javascript Dhtml Javascript Rollover Subsection Menu
Easy Setup
  • De Luxe Tuner. GUI interface to create your javascript rollover subsection menu menus easily and in no time
  • Sensible menu parameters for manual editing
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed javascript rollover subsection menu samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Seamless Integration
  • Cross-frame support - menus work on frameset-based pages
  • 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



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Use a mouse to move a menu as a usual window. Also you can create the menu where each submenu can be "separated" from the menu (MS Office toolbar-like mode).
  • When the page is scrolled the menu remains visible. The menu can "float" along one or two coordinate axes.
  • There can be multilevel menus - create as many rows of the menu as necessary. Any submenu in its turn can include different number of columns.

Recent Questions

Q: I really like floatable tree menus and want to add in this website.
I am not professional website developer … I’ve installed your trial software …
but not able to add tree menus in my website.
Can you pls guide me how I can add dhtml vertical menus in left side bar of website?

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.

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

When you open Deluxe Tuner ( Deluxe Tree ) 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://www.deluxe-tree.com/parameters-info.html

You can also use Individual Styles for items and subitems.

2. You should install the tree menu on your page.
You can click, for example, File/Export to HTML.

Add several rows into your html page.
<head>
...
<!-- Deluxe Tree -->
<noscript><a href="http://deluxe-tree.com">Javascript Tree Menu by Deluxe-Tree.com</a></noscript>
<script type="text/javascript">  var tWorkPath="deluxe-tree.files/";</script>
<script type="text/javascript" src="deluxe-tree.files/dtree.js"></script>
<!-- (c) 2006 - 2007, http://deluxe-tree.com -->
...
</head>

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

You should also copy all engine files
dtree.js - menu engine file
dtree_add.js - additional module for floatable/movable menus
dtree_dyn.js - additional module with Javascript API to change the menu "on-the-fly"
dtree_ajax.js - additional module with the AJAX-like support

into "deluxe-tree.files/" folder. You should place this folder in thesame folder with your index.html page.

Try that.



Q: How can I center my navigation java script menu bar within my HTML page? I have tried putting the script into a table that is centered. I have also changed the   var menuWidth to 800px. The navigation bar is still right-justified instead of centered in both IE and Firefox/Mozilla.

A: Now you use absolute position for the java script menu bar:

  var absolutePos=1;
  var posX="0px";
  var posY="0px";


You should set:
  var absolutePos=0;



Q: You will see I got the first level looking amazing.. this is exactly what I wanted. The interesting thing I figured out was not to use the item border.. this was messing things up. You may notice that when each item highlights.. there is a 1px white line at the separators.. but this is not produced with the item border, but rather from the separator itself which I made in two 1 pixel lines, one blue, on white.. this created that effect.

So now my only problem left is to figure out how to bring this look into the submenus. I was thinking it would be nice to use the separators in the same way throughout the submenus. There does not however seem to be a way to do this. When I tried inserting a separator into a submenu.. nothing happened... I am probably doing this wrong.

Can you please show me how to create the same look I have in the first level in the submenus.. this would be helpful.

I must say, this menu is finally starting to look the way I originally envisioned it. I am very happy. =o)

Thank you so much for all the help you have given me.


A: To add separators in submenus you should write it so:

 ["|-",] //first level submenus
   ["||-",] //second level submenus
and so on.

Try that.


Q: Is it possible to add a combo box or a search field to a tree view component?

A: You can paste any html code inside item's text, for example:

["+Support", "", "icon5_t.gif", "icon5_to.gif", "", "Support Tip"],
 ["|Index  <select style='width:120px;height:17px;font:normal 10px Tahoma,Arial;'><option>Section 1<option>Section 2<option>Section 3</select>","", "", "", "", "", "", "0"],
 ["|Search <input type=text style='width:80px;height:17px;font:normal 10px Tahoma,Arial;'>  <input type=button value='Go'style='width:30px;height:17px;font:normal 10px Tahoma,Arial;'>", "", "", "", "", "", "", "0"],
 ["|Write Us", "mailto:[email protected]", ""],
 ["|<INPUT TYPE=checkbox CHECKED ID=chk1 onclick='choosebox1()'>Uncheck this check box for some free advice","","","",],
["<img src='img/sep.gif' width=113 height=1>"],