Collapsible Menus by Deluxe-Menu.com
Collapsible Menus

Menu Screenshots

Collapsible Menus Html Bar Images

Features

High Performance
  • AJAX menu loading - loads web menu data from the server "on-the-fly".
  • Commonly loads quicker than other html page elements
  • UL/LI items structure
  • Runs well with an unlimited number of submenus and items
Easy Setup
  • De Luxe Tuner. GUI interface to create your collapsible menus menus easily and in no time
  • Sensible menu parameters for manual editing
Html Coding For Drop Down Menu Collapsible Menus
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed collapsible menus samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Unrivalled Features
  • Scrollable, dragable, floating, right-click menus
  • Keyboard navigation - press Ctrl+F2 to enter the menu
  • 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".
  • Search feature - add the search area in the menu and type symbols. The found words will be higlighted.
  • Sound support!
Cost Effective



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML 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's frame.Choose any color for backgrounds of submenus and items.
  • Specify various values for padding and spacing for the whole menu and for each separate submenu.
  • You can specify a time for delays in showing or hiding of a submenu. Use special prefixes for image paths and links to make paths absolute.
  • Create separators using your own pictures, size and alignment.

Recent Questions

Q: How do I add content to each tab in the hover tab menu so that the content will appear on this same page
(as opposed to having to move to another page)?

A: You should paste your content in the <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>

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 the
DIV'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", "", "", ],

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




Q: Can title attributes be added to a javascript dynamic menu?

A: Yes you can add titles in javascript dynamic menu.
See menuItems parameter:

  var menuItems = [
[text, link, iconNormal, iconOver, tip, target, itemStyleInd, submenuStyleInd, jsFilename],
[text, link, iconNormal, iconOver, tip, target, itemStyleInd, submenuStyleInd, jsFilename],
...
];

["Product Info","", "deluxe-menu.files/icon1.gif", "deluxe-menu.files/icon1o.gif", "TITLE", "", "", "", "", "", "", ],



Q: I changed the parameter from
  var dmObjectsCheck=0;
to
  var dmObjectsCheck=1;
in the data.js file
but it didn't change it;
_____________________

I opened the dmenu_add.js file, but I'm not sure what I'm supposed to do with it?
_____________________

I went to your sample page and I would like to add the item widths into mydata.js file, but each item is a different width. Would it be correct for meto do this?...

  var itemStyles = [
["itemWidth=98px"],
];

Or will I have to make all the main menu items/graphics the same width?


A: You don't have to change your dmenu_add.js file.
Please, place this file in the folder where your menu iscreated in.

Yes, you can set itemWidth for each main item.

Please, use Deluxe Tuner to create your individual styles.

You should write, for example, so:

  var itemStyles = [
["itemWidth=98px"], // style 0
["itemWidth=100px"], // style 1
["itemWidth=110px"], // style 2
["itemWidth=120px"], // style 3
["itemWidth=95px"], // style 4
];
  var menuItems = [

["","", "data.files/products.gif", "data.files/products_mo.gif", "Products", "_self","0" , , , ],

["","", "data.files/demoCenter.gif", "data.files/demoCenter_mo.gif", , ,"1", , , ],

["","", "data.files/resources.gif", "data.files/resources_mo.gif", , ,"2", , , ],

["","support.htm", "data.files/support.gif", "data.files/support_mo.gif", , "_self","4", , , ],

["","", "data.files/company.gif", "data.files/company_mo.gif", , , , , , ],];


Q: How can I use Danish characters in my dhtml menu bars?

A: You should turn on "Tools/Use utf8 encode" property.
In that case your data file will be saved in UTF-8 encode. So, you
should set UTF-8 encode on your page too

<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 manually
change your letters in any text editor.