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

Template:






    - Sound support!
    - AJAX menu loading - loads web menu data from the server "on-the-fly".
    - Hundreds of pre-designed templates
    - Relative/Absolute menu position
    - 85% transparency for sub menus
    - Image arrows
    - Several menus on one page
    - Horizontal or vertical orientation




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

Menu Screenshots

Simple Javascript Tab Menu Javascript Collapsible Menus

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

Features

Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed simple javascript tab menu 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!
Javascript Onmouseover Styles Simple Javascript Tab Menu
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
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
Cost Effective



2.0 Buttons by Web-Buttons.com v3.0.0
Buy Now!   ::  Free Trial Download   ::  More Info

Javascript Menu. DHTML Menu.

  • Tune menu parameters manually or using Deluxe Tuner. Then add several rows of a code within html page - your menu is ready!
  • Use special JavaScript functions for: Dynamic changing of items (text, link, icons and even individual style!). Making a menu item active/inactive. Addition/removing of items. Changing of visibility of items. Getting the information on any menu, submenu and items. Other tricks.
  • Opportunity to control the menu from the keyboard.
  • Cross-frame mode allows you to build full-featured menus on the pages that use frame-based structure. But for all that it's not necessary to insert any additional code into all the pages - just specify some additional parameters of the menu.
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: I developed a little test dhtml menu slide tree. For the items "Aktivitaeten Auswahl" and "Kontakt Auswahl" I have no subitems. The item line shows a little button with double arrows.

I would like to get rid of these buttons, because there are no subitems.
How can I do that?

A: You should create Individual XP Style and apply it for these items.

  var tXPStyles = [
["tXPTitleBackColor=#D9DAE2","tXPTitleBackImg=data-quelle.files/xptitle2_s.gif", "tXPExpandBtn=data-quelle.files/right.gif,data-quelle.files/right.gif,data-quelle.files/right.gif,data-quelle.files/right.gif"],
];



Q: Now I need to work out how to add multiple menu's to a page? Are you able to reference these separately - is this possible.

The page that I am creating lists out notes from our system - there is a "options" button to the right of each note - when the cursor hovers over this button I want to dynamically load themenu's. On any page there could be over a 100 of these "option" buttons and the menu that would load from each option button could be different and specific to the note.


A: You can add as many menus as you want on the one page.

You should call
<SCRIPT type=text/javascript>  var dmWorkPath = "data.files/";</SCRIPT>

<SCRIPT src="data.files/dmenu.js" type=text/javascript></SCRIPT>

and then call your data files:

<SCRIPT src="data.files/data1.js" type=text/javascript></SCRIPT>

<SCRIPT src="data.files/data2.js" type=text/javascript></SCRIPT>

<SCRIPT src="data.files/data3.js" type=text/javascript></SCRIPT>

<SCRIPT src="data.files/data4.js" type=text/javascript></SCRIPT>

> The page that I am creating lists out notes from our system -
> there is a "options" button to the right of each note - when the
> cursor hovers over this button I want to dynamically load the
> menu's.

You can try to use pop up menus
http://deluxe-menu.com/popup-mode-sample.html

You may also generate a menus from a database or XML using any server-side script, e.g., PHP, ASP, VB, etc.


Q: How do you labeling the various segments of your page to utilize the horizontal menu tabs?


A: See, for each item you should assign the ID property of the contentDIV (see data file with your menu parameters).

["Style Name","contentName", "", "", "", "", "1", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Style Description","contentDescription", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Style Variations","contentVariations", "", "", "", "", "", "", "", ],
["-","", "", "", "", "", "0", "", "", ],
["Empty","", "", "", "", "", "2", "", "", ],

And on your html page you should create DIV's with such ID.

<div id="contentName" style="height: 0%; visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/style01_title.gif" width=140 height=90 alt="Glass Style Tabs"></p>


<br><br><br>

You should paste your content here!!!!!
</div>

<div id="contentDescription" style="height: 0%; visibility: hidden;" class="tabPage">
<br><br><br>
<p align=center><img src="img/style01_title.gif" width=140 height=90 alt="Glass Style Tabs"></p>

<br><br><br>

You should paste your description here!!!!!
</div>

You can paste any code within DIV's (PHP, Javascript ...)


Q: I’d like to know how to populate the navigation bar menu from a database?


A: Please, see the example of .php file.The content of .php file depends on your database structure.

<?php

// The example for PHP/MySQL.
// MySQL database has the table "menuTable" that contains data for menu items.
// The table has the following fields:
// 1. "text" - item text
// 2. "link" - item link
// 3. "icon1" - item icon (normal state)
// 4. "icon2" - item icon (mouseover state)
function getMenuItems()
{
$jsItems = '';

// Select all records from table "menuTable"
$allItems = mysql_query('SELECT * FROM menuTable;');

// Extract items data from database and build Javascript code for menuItems
while ($itemData=mysql_fetch_array($allItems))
{
$jsItems .= '["'.$itemData['text'].'", "'.$itemData['link'].'", "'.$itemData['icon1'].'", "'.$itemData['icon2'].'"],';
}

// Return Javascript code
return $jsItems;
}


?>

<script>
  var menuParam1 = value1;
  var menuParam2 = value2;
  var menuParam2 = value2;
...

  var menuItems = [

// Write Javascript code for menu items
echo getMenuItems();

?>

];
</script>

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