Javascript Menu Example by Deluxe-Menu.com
Javascript Menu Example

Template:






    - Search feature - add the search area in the menu and type symbols.
    - Visible over select boxes, iframes, pdf, flash, Java applets.
    - Personal CSS styles for separate menu elements
    - Cross-frame support - menus work on frameset-based pages
    - Top items and submenus have a shadow
    - Submenus dropdown on mouseover
    - 85% transparency for sub menus
    - Text aligned to left




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

Menu Screenshots

Javascript Menu Example Css Expanding Menu

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

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
Cost Effective
Java Script Tutorial Drop Down Menu Javascript Menu Example
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
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
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
Buy Now!   ::  Free Trial Download   ::  More Info

Javascript Menu. DHTML Menu.

  • Submenus drop down over all the objects of the page (select, flash, object, embed, applet). If for some reasons a submenu can't drop down over an object, the latter will be hidden for a time when the submenu is shown.
  • These effects will make your menu more attractive and stylish. You can cast a shadow on the menu and submenus, set transparency. Among available transitional effects there are such as fade, mosaic, random dissolve, slide out and many others.
  • Create individual styles and assign them to any submenu and item. Use individual styles to achieve stunning effects!
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: I’m looking for a popup multilevel menu. I think from your website that your menus will do this for but I can’t figure out using the trial version how to do it.

I have an image map of a graphic and I need to call my javascript pop out menu from an OnMouseOver in the image map…

<areahref="#"onmouseover=""shape="rect"coords="120, 124, 180, 136">

Obviously I can’t put the standard <script>… as described in your sample.

Is there a setting that I need to change or is this not possible with your javascript pop out menu.

A: You can try to use Popup Menu, see more info:
http://deluxe-menu.com/popup-mode-sample.html

See how you should call pop up menu

<img src="data-samples/images/popup_pic.gif" width=180 height=119 onmouseover="return dm_popup(0, 2000, event);" onClick="return dm_popup(1, 2000, event);" style="cursor: pointer;"><br>

You can create your javascript pop out menu using Deluxe Tuner application.



Q: Will all your navigation bar examples work cross-frame?

A: See how should you create cross frame menu:

1. To initialize the cross frame menu call dm_initFrame()
function instead of standard dm_init() function within data.js file:

dm_initFrame(framesetID, mainFrameInd, subFrameInd, orientation);

framesetID - id attribute of the frameset;
mainFrameInd - index of the main frame (where the top-menu is placed), >=0;
subFrameInd - index of the subframe (where the submenus will be shown), >=0;
orientation - frame orientaion: 0 - top-to-bottom, 1 - left-to-right; 2 - bottom-to-top; 3 - right-to-left.

So you should create your menu in Deluxe Tuner, save it.
Create html file with your frame set.

Set ID for the first frameset:
<FRAMESET id=frmSet rows=220,*>
<FRAME id=frame1 src="Deluxe Menu Samples_files/cross-frame-horizontal-1.htm"> //menu frame
<FRAME id=frame2 name=frame2 src="Deluxe Menu Samples_files/testlink.htm"> //content frame
</FRAMESET>

Then you should open your data file in any text editor and change
dm_init(); for example to dm_initFrame("frmSet", 0, 1, 0);

You'll find more info here:
http://deluxe-menu.com/cross-frame-mode-sample.html

Q: I have setup some tabs on a site that I am designing and for some reason when i click on a tab and it links to another page it automatically highlights the first tab in the row.
  I have triedfiddling with it and have not been able to figure it out.  Can someone point me in the right direction to have the correct tab selected in the css tab menu after i click it and goto the page.


A: Deluxe Tabs doesn't support API functions which can return theselected tab.

You can set "bselectedItem" and "  var bselectedSmItem" parametersbased on your link before you call your data file.

For example, move "  var bselectedItem" and "  var bselectedSmItem" parametersfrom your data file to your code.

<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
  var bselectedItem=<?php echo $seltabs; ?>;
  var bselectedSmItem=<?php echo $selsmtabs; ?>
</script>
<SCRIPT src="data.js" type=text/javascript></SCRIPT>
</TD>

You should define seltabs and selsmtabs using server side script.

You can also set it on every page before you call data.js file, forexample:

<TD vAlign=top align=left>
/* Select Tab */
<script type="text/javascript" language="JavaScript1.2">
  var bselectedItem=4;
  var bselectedSmItem=3;
</script>
<SCRIPT src="data.js" type=text/javascript></SCRIPT>
</TD>
</span>

Q: I made my own multi-users Content Management System and I'm using deluxe menu developer license to create my menu into this application.

One dhtml menu vertical constantly need to be reload to see new page created/modified or deleted by other logged users. So I just take out your code for Ajax sample to fill dynamically this submenu.

There is my .js file fort my menu : mnu_admin.zip (You'll need to extract the .js file)

In this file I'm using the same way it goe's into your example with Ajax on line : [172] ["Contenu pages","", "", "", "Gйrer les pages du site", "", "0", "0", "modules/menu/data-ajax3.js", ],

There is my : data-ajax3.js (periodically change)

  var menuItems = [

 ["|Services", "contenu_pages_a.php?id=HMglcKWvAQklxw4uM3qHWa9pFhY432dZNIXOIlYNJO4%3D", "", "", "Services", "", "", "", ""],
 ["|Documentation", "contenu_pages_a.php?id=iG31PyfJ%2BswDBJPcn61IXgczwXkePaDclD6DPsxAUKE%3D", "", "", "Documentation", "", "", "", ""],
 ["|Soutien financier","contenu_pages_a.php?id=tIACTxYwfsey%2FBGr0ROjAXGggU3LdglWtxMTyTVINtU%3D","", "", "Soutien financier", "", "", "", ""],
 ["|Programmes","contenu_pages_a.php?id=A7v%2BWOmpw4syUqHRcPizZjUwh9TzxyuYm5f1yi7EiGM%3D","", "", "Programmes", "", "", "", ""],
   ["||ARLPHAT","contenu_pages_a.php?id=SGe4LNdC8O%2BG5eDd1fgkfkK3lKE80KZL0Pi8o3zGo3Y%3D","", "", "ARLPHAT", "", "", "", ""],
   ["||Association des scouts","contenu_pages_a.php?id=nZVnC9wzyyojxSJI7Lfe7FpTceVEbsdlHy9vURCyULk%3D", "","", "Association des scouts", "", "", "", ""],
   ["||Secondaire en spectacle","contenu_pages_a.php?id=io2hWjkLPlP%2Fcum%2FzIVoV%2FrWYskolQgvLKpc%2FJc%2FRBo%3D", "", "", "Secondaire en spectacle", "", "", "", ""],
   ["||Sport йtudiant","contenu_pages_a.php?id=0fY3UenTH2Rri4AD72RKj7qz8EuwBxG3K0IaXLTqyjM%3D", "","", "Sport йtudiant", "", "", "", ""],
   ["||Jeux du Quйbec","contenu_pages_a.php?id=lZL5TyT9RFsRE2kzAPJisP4ZAAwcfiHG3JTKS6Ey9%2BE%3D","", "", "Jeux du Quйbec", "", "", "", ""],
];

Another user just delete differents pages so the data_ajax3.js change to this (example) :

  var menuItems = [
 ["|Services","contenu_pages_a.php?id=HMglcKWvAQklxw4uM3qHWa9pFhY432dZNIXOIlYNJO4%3D", "","", "Services", "", "", "", ""],
 ["|Documentation", "contenu_pages_a.php?id=iG31PyfJ%2BswDBJPcn61IXgczwXkePaDclD6DPsxAUKE%3D", "", "", "Documentation", "", "", "", ""],
 ["|Soutien financier", "contenu_pages_a.php?id=tIACTxYwfsey%2FBGr0ROjAXGggU3LdglWtxMTyTVINtU%3D", "", "", "Soutien financier", "", "", "", ""],
 ["|Programmes", "contenu_pages_a.php?id=A7v%2BWOmpw4syUqHRcPizZjUwh9TzxyuYm5f1yi7EiGM%3D", "", "", "Programmes", "", "", "", ""],
   ["||ARLPHAT", "contenu_pages_a.php?id=SGe4LNdC8O%2BG5eDd1fgkfkK3lKE80KZL0Pi8o3zGo3Y%3D", "", "", "ARLPHAT", "", "", "", ""],
   ["||Association des scouts", "contenu_pages_a.php?id=nZVnC9wzyyojxSJI7Lfe7FpTceVEbsdlHy9vURCyULk%3D", "", "", "Association des scouts", "", "", "", ""],
   ["||Secondaire en spectacle", "contenu_pages_a.php?id=io2hWjkLPlP%2Fcum%2FzIVoV%2FrWYskolQgvLKpc%2FJc%2FRBo%3D", "", "", "Secondaire en spectacle", "", "", "", ""],
   ["||Sport йtudiant", "contenu_pages_a.php?id=0fY3UenTH2Rri4AD72RKj7qz8EuwBxG3K0IaXLTqyjM%3D", "", "", "Sport йtudiant", "", "", "", ""],
   ["||Jeux du Quйbec", "contenu_pages_a.php?id=lZL5TyT9RFsRE2kzAPJisP4ZAAwcfiHG3JTKS6Ey9%2BE%3D", "", "", "Jeux du Quйbec", "", "", "", ""],
];
Trouble :

When I go over "Contenu pages" menu, the submenu won't reload and still show me the new submenu with upper content (With "Qui sommes-nous"). I need to completely refresh the page and sometime to delete browser CACHE.

What I want to do :

I want to get submenu completely reload everytime I pass over "Contenu pages" dhtml menu vertical with the mouse.

Tested Browser :
IE6 and FF3

A: Try to set the following parameter to reload submenus on recall:

  var ajaxReload=1;

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