Javascript Slide Out Side Tab by Deluxe-Menu.com
Javascript Slide Out Side Tab

Template:

Green Tabs Template - Mouseover Drop Down Menu






    - Sound support!
    - Cross-frame support - menus work on frameset-based pages
    - Special JavaScript API for changing javascript menu "on-the-fly"
    - Filters and Transitional effects
    - Top items and submenus have a shadow
    - UL/LI items structure
    - Search feature - add the search area in the menu and type symbols.
    - Deluxe Tuner - visual interface to create and modify dhtml menus easily and in no time.




2 0 Navigation Buttons by Web-Buttons.com v3.0.0
Buy Now!   ::  Free Trial Download   ::  Blog   ::  More Info

Menu Screenshots

Javascript Slide Out Side Tab Javascript Navigation Example

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

Features

Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed javascript slide out side tab 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!
Simple Menu Javascript Slide Out Side Tab
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
Cost Effective
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
Buy Now!   ::  Free Trial Download   ::  More Info

Javascript Menu. DHTML Menu.

  • Setup menu parameters manually or using De Luxe Tuner. Then add some rows of a code within html page code and your menu is ready!
  • Use special Java Script methods for: Dynamic changing of items (link, text, icons, arrows and even individual style!). Addition/removing of items or submenus. Disabling and enabling menu items. Getting the info on every submenu, menu, and items. Changing appearance of items. Other coding tricks.
  • Cross-frame mode lets you to construct full-featured dhtml menus on the pages with frames. But for all that frame set it's not necessary to insert any additional code into all the pages - just specify several extra menu parameters.
  • Ability to handle the menu from the keyboard via keystrokes.
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: We bought a Delux Tab single site licence yesterday.We can't figure out how to implement tab menus into our web site.
Can you please give us some advice?

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

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: I have managed to insert a separator in a menu and set the image path but the separator image does not show.

Is there anything else I need to do?


A: Please, see the following parameters:

//------- Separators -------
//--- Separators
  var separatorImage="";
  var separatorWidth="5";
  var separatorHeight="100%";
  var separatorAlignment="right";
  var separatorVImage="images/public/separator.gif";
  var separatorVWidth="3";
  var separatorVHeight="100%";
  var separatorPadding="";

You should set a separator in the menuItems, for example:

  var menuItems = [
["Home","index.cfm", , , , , , , , ],
["-"],
["About Us","about.cfm", , , , , , , , ],

];
Try that.


Q: No matter where I paste the script in the html for the drop down menu I created, it shows up at the top left corner of the page.

I would like it to go below the blue banner at the top of the page.
Please advise as to what I am doing wrong.


A: Now you're using absolute position for the menu:

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

Try to use relative position

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


Q: Is there any luck with getting your popup menusto work with the dynamic drive script..?

A: Unfortunately we don't work with dynamic drive script.
But I suppose that you can use it with Deluxe Menu without any problems.
But in that case you should move menuItems and dm_init(); function from your data file tothe html page directly.
For example delete the following code from your data file

  var menuItems = [
["Aston Martin Page","javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');\"", "", "", "", "", "", "", "", "", "", ],
];
dm_init();

and paste it in SCRIPT tags on your html page in the place where you want to have a menu:

...
<div>
<script type="text/javascript">
  var menuItems = [
["Aston Martin Page","javascript:ajaxpage('ajaxfiles/external3.htm', 'rightcolumn');\"", "", "", "", "", "", "", "", "", "", ],
];
dm_init();
</script>
</div>


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