Simple Javascript Tab Menu by Deluxe-Menu.com
Simple Javascript Tab Menu

Menu Screenshots

Simple Javascript Tab Menu Dhtml Cross Browser Menu

Features

Cost Effective
Easy Setup
  • De Luxe Tuner. GUI interface to create your simple javascript tab menu menus easily and in no time
  • Sensible menu parameters for manual editing
Dhtml Drag Drop Tree Simple Javascript Tab Menu
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
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
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!



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Create contextual menus for your pages. For this purpose you should assign a special function for the object you want. The current coordinates of the mouse pointer or your own ones can be used for the contextual menu.
  • When the submenu is larger than the visible area of the page the submenu will be automatically decreased. To see all the submenu items you do not need to use scrollbars or something like that - just put your mouse to the bottom of a submenu and it will be automatically scrolled! You can also specify height and width for each separate submenu.
  • Build menus completely based on Cascading Style Sheets. It is possible to appoint the individual CSS styles for separate elements of the menu.

Recent Questions

Q: I used the drop menu creator to create a simple tab example, and I created a simple HTML file to display the tabs. It initially appears fine when the page first displays (e.g., the correct div is hidden), but when I *first* click on a tab I always get a javascript error deep in the .js code. Then I click around a bit between the tabs and get some display problems (no more javascript errors though), until finally the show/hide logic recovers and all looks ok.

The error I initially get is something like “tabs[…].id is not an object”. I have the IE7 debugger turned on, otherwise I might not ever see this error.

FYI, I tried your example menus on your web site and everything is fine! Maybe the .js files on your web site are not the same as those created by the generator?

A: You should set the following parameter in drop menu creator:

  var bselectedSmItem=0;



Q: I would like to use it in a page containing two iFrames.

The iFrame called "nav" is where the menu will appear and the iFrame called "main" is where I want any sub-menu items to appear.

How can this be done given there are no "frameset" tags in this type of structure?


A: Deluxe Menu doesn't work with <IFrame> objects.
It works with<frameset> objects only. All it can to do with <IFrame> is to loadpages into it.

You should use standard installation for the menu.


Q: How to select a different background (colour or images) in the link drop down menu?


A: Actually you can create any menu you like with Deluxe Menu.

You can use Individual Styles to set background image(color) for the items

  var itemStyles = [
["itemWidth=92px","itemBackColor=#FFF000,#AAAAAA","itemBackImage=deluxe-menu.files/btn_black.gif,
deluxe-menu.files/btn_black_blue.gif"],
];

oryou can use images instead of icons (you should delete item's text).
["","", "deluxe-menu.files/btn_black.gif", "deluxe-menu.files/btn_black_green.gif", "", "", "", "", "", ],


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