Jqueryui Tab Submenu by Deluxe-Menu.com
Jqueryui Tab Submenu

Menu Screenshots

Jqueryui Tab Submenu Horizontal Menu Bar Scripts

Features

Easy Setup
  • De Luxe Tuner. GUI interface to create your jqueryui tab submenu 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 jqueryui tab submenu samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
Html Mouseover Javascript Drop Down Menus Jqueryui Tab Submenu
Cost Effective
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!
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



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • There can be multi level menus - create as many rows or columns of the menu as you want.
  • Use a mouse to drag a menu as a usual window. Also you can construct the menu where each submenu can be "detached" from the main menu (MSOfficeToolbarLike mode).
  • When the page is scrolled the menu remains visible. The DHTML menu can "float" along one or two coordinate axes.

Recent Questions

Q: I can’t seem to figure out how to specify the width of individual horizontal menu items for the html menu. I would like to specify that each menu item on the horizontal take up just 113px regardless of the number of characters in the item. Is there a way of doing that?

A: You should use   var itemStyles to set an individual item style. Forexample:

  var itemStyles = [
["itemWidth=113px"]
];
  var menuItems = [
["text 1", "link", "icon1", "icon2", "tip", "target", "0"],
["text 2", "link", "icon1", "icon2", "tip", "target", "0"],
["text 3", "link", "icon1", "icon2", "tip", "target", "0"],
];

Where "0" - style number in itemStyles that contains the parametersfor items width.

Use Deluxe Tuner GUI to create and assign individual styles.



Q: I will build menu for several books’ Contents, each book is more than 100 lines and has links. I think if all the books’ contents in 1 *.JS file then it is TOO LOONG!!.
Can I break it down to 1 book for 1*.JS ? How?


A: You cannot divide your menuItems parameter.
You can only use one .js file for your menu parameters and the other.js file for your menuItems = [...];

But you can do it in two ways.

1) You can try to use several menus on the one page, for example:
param.js // file with menu parameters (all parameters before menuItems = [...];)
menu1.js // menuItems for "AC-DC", "ANLOG"
menu2.js // menuItems for "DIGITAL", "WinXP"
menu3.js // menuItems for "MS-Word", "MS-Excel"
In these menu files you should write
menuItems = [
...
];
dm_init();

Then you should install your menu in the following way

<script type="text/javascript" src="param.js"></script>
<table>
...
<script type="text/javascript" src="menu1.js"></script>
...
<script type="text/javascript" src="menu2.js"></script>
...
<script type="text/javascript" src="menu3.js"></script>

But it will be easier to use vertical menu in such case
  var isHorizontal=0;
  var smColumns=1;

2) You can also try to add some code, see the attached example.

In the first file (@MY books (Multiple Col.js) I write menuItems for the first item "AC-DC".
Notice that you should delete comma at the end of the last item
  var menuItems = [

["AC-DC","", , , , , , , , ],
 ["|@Book1","testlink.htm", , , , , , , , ],
...
 ["|@Book3","", , , , , , , , ],
   ["||CH02","", , , , , , , , ],
   ["||CH01","", , , , , , , , ] // delete comma at the end of the last item

];

In the second file (@MY books (1.js) you should write
menuItems = menuItems.concat(

[

["ANLOG","", , , , , , , , ],
 ["|@Book1","", , , , , , , , ],
 ["|@Book2","", , , , , , , , ],
 ["|@Book3","", , , , , , , , ] // delete comma at the end of the last item

]
);

In the third file (@MY books (2.js) you should write
menuItems = menuItems.concat(

[

["DIGITAL","", , , , , , , , ],
 ["|Item 1332","", , , , , , , , ],
["WinXP","", , , , , , , , ],
 ["|Item 1333","", , , , , , , , ],
["MS-Word","", , , , , , , , ],
 ["|Item 1334","", , , , , , , , ],
["MS-Excel","", , , , , , , , ],
 ["|Item 1335","", , , , , , , , ] // delete comma at the end of the last item
]
);

dm_init();

Notice that you should write dm_init(); function in the last file.

In the .html file you should write
...
<tr>
<script type="text/javascript" src="@MY books (Multiple Col.js"></script>
<script type="text/javascript" src="@MY books (1.js"></script>
<script type="text/javascript" src="@MY books (2.js"></script>
</tr>
I hope you understand me.


Q: One intern design a menu for us using MenuTuner that we bought however Menu doesn’t work in Firefox or netscape.
It works fine in Internet Explorer.
Can you help? I’m attaching the zip file which you can extract and open index.html to see what’s wrong.


A: Try to specify units in "px".
  var tmenuWidth = "230px";
It's necessary to specify exact value for Mozilla browsers. It helpsto position menus correctly.

You should set this parameter:
  var tmenuHeight = "auto";


Q: Can you send me the full detail how would I use your navigation bar generator for web site development?

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.

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-menu.com/menu-items-info.html

You can also use Individual Styles for items and subitems
http://deluxe-menu.com/individual-item-styles-info.html
http://deluxe-menu.com/individual-submenu-styles-info.html

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

So, you'll have folder with all engine files and images
("deluxe-menu.files/" folder by default), deluxe-menu.html file and
data-deluxe-menu.js file with all menu parameters.

Open deluxe-menu.html file in any text editor and copy several rows of
code into your page (for example index.html page of your website).

Copy and paste several rows into your html page (index.html).

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

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

You should also copy "deluxe-menu.files/" folder with all engine files
dmenu.js
dmenu_add.js
dmenu_dyn.js
dmenu_key.js
dmenu_cf.js
dmenu_popup.js
dmenu_ajax.js
dmenu_search.js
and data-deluxe-menu.js file into the same folder with your index.html page.

Try that.

You can see more info about installing here:
Deluxe Menu
http://deluxe-menu.com/installation-info.html
Deluxe Tree
http://deluxe-tree.com/installation-info.html
Deluxe Popup Window
http://deluxepopupwindow.com/window-installation-info.html
Deluxe Tabs
http://deluxe-tabs.com/product-info/