Mac Stle Vertical Javascript Menu by Deluxe-Menu.com
Mac Stle Vertical Javascript Menu

Menu Screenshots

Mac Stle Vertical Javascript Menu Sample Code For Vertical Flyout Menu

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
Easy Setup
  • De Luxe Tuner. GUI interface to create your mac stle vertical javascript menu menus easily and in no time
  • Sensible menu parameters for manual editing
Dhtml Transparent Menus Mac Stle Vertical Javascript Menu
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed mac stle vertical javascript 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!
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.

  • Apply any font of any color, size and font decoration you need. Use any available type, color and thickness of a menu's frame. Choose any color for submenus and items backgrounds.
  • Set the size of the menu in percent, pixels, or other units. This menu may have a relative (it can be inserted into the table, for example) or absolute position .
  • Specify various values for spacing and padding for the whole menu and for each separate submenu.
  • You can specify a time for delays in showing or hiding of a submenu. Use special prefixes for image paths and links to make paths absolute.
  • Create separators using your own pictures, size and alignment.

Recent Questions

Q: I played with it and I got the tabs java script horizontal menu to work. but having problems with them:

1. I want the tabs to open when you mouse over them, not when you click. Is it possible to do this?

2. I want the tabs to close when your mouse leave them. Can I do this?

3. It keeps saying "Incorrect key" when you click on them. Is it possible to fix them?

A: No, unfortunately it is not possible in Deluxe Tabs.

But you can use Deluxe Menu to create such java script horizontal menu.

To create such menu you should set the following parameters:

  var smOrientation=1; //horizontal orientation of submenus
  var subMenuAlign="pleft"; //submenu position (left align)
  var smHidePause=-1; //your submenus won't be hidden till you click orscroll the page.

"Incorrect Key" message means that you didn't paste your reg. key into data.js filewith your menu.

You should paste your key parameter into .js file where your java script horizontal menuparameters (vars) and items (  var bmenuItems) are placed.You should paste the following code at the beginning of the file:

/*
Deluxe Menu Data File
Created by Deluxe Tuner v3.2
http://deluxe-menu.com
*/

  var key="XXXXXX";

// -- Deluxe Tuner Style Names

Where XXXXX the key from your license message.
Try to clear also browser cache.

Notice your key will work on registered domain only. It won't work onlocal machine.



Q: Comprehensive Mental Health has a site license to \use Deluxe Menu. We are currentlyrunning version 2.0.

Unless we set the topdy parameter to be -65, our submenus do not appear adjacent to the toplevel menu. Below are our parameters and our menu. What is causing this problem?


A: It is possible that you have some problems with your css.
The problem is that the script can't get css properties of the object if they are described in separate .css block (or file).
In other words, you can't get the value of "position" attribute of the object if the object doesn't have this property within inline style(style="position:absolute"). To get the value you should move .css style into style="" attribute.

Please, try to add your
css file -> inline css, for example:

You should add <DIV id=SiteMenu>

to the

style="position:absolute;"

So, you'll have:

<DIV id=SiteMenu style="position:absolute;">

Check that.


Q: It seems that if I try and use the syntax  ["| with some HTML such as <DIV class = 'myclass'> inside dropdown menu it IGNORES the HTML and just treats it like another link.
But if I don't start the line with  ["| ..... Then I get a syntax error.

For example:

I am trying to place 4 links in a square shape in the top left of my screen. To do this I was going to create DIV's and set the TOP and LEFT to different values from within a loop (I left out the code that does the updating for myleft and mytop...)

  var menuItems = [

<loop>

 ["|<div style='position: absolute; left: <cfoutput>#myleft#</cfoutput>px; top: <cfoutput>#mytop#</cfoutput>px>'","", "", "", "", "", "", "", "", "", "",],

 ["|#ParentMenuDesc#","index.cfm?Workflow=#Workflow#&role=#Privilege_id#&cacheid=#createuuid()#&Process_Type=#Process_Type#&PageMode=#Process_Logic#", "#menu_option_icon#", "", "", "_top", "", "", "", "", "",],

 ["|</div>","", "", "", "", "", "", "", "", "", "",],

<end loop>

];

What am I doing wrong here?.... Can you show me how to accomplish this task?

A: No, this syntax is incorrect. It won't work.

  var menuItems = [

<loop>

 ["|<div style='position: absolute; left: <cfoutput>#myleft#</cfoutput>px; top: <cfoutput>#mytop#</cfoutput>px>'","", "", "", "", "", "", "", "", "", "",],

 ["|#ParentMenuDesc#","index.cfm?Workflow=#Workflow#&role=#Privilege_id#&cacheid=#createuuid()#&Process_Type=#Process_Type#&PageMode=#Process_Logic#", "#menu_option_icon#", "","", "_top", "", "", "", "", "",],

 ["|</div>","", "", "", "", "", "", "", "", "", "",],<end loop>

];

You should have <div> ... </div> tags in each dropdown menu item!
It is not correctly to write <div> ... </div> tags for wholesubmenu.

  var menuItems = [
 ["|<div style='position: absolute; left:<cfoutput>#myleft#</cfoutput>px; top: <cfoutput>#mytop#</cfoutput>px>text</div>'","", "", "", "", "", "", "", "", "", "",],

 ["|#ParentMenuDesc#","index.cfm?Workflow=#Workflow#&role=#Privilege_id#&cacheid=#createuuid()#&Process_Type=#Process_Type#&PageMode=#Process_Logic#", "#menu_option_icon#", "","", "_top", "", "", "", "", "",],

 ["| ","", "", "", "", "", "", "", "", "", "",],
];



Q: I downloaded the trial version and gave it a run.
I cannot get thebackground color of the menu to change – it this a limitation of the trail version or a bug?


A: No, it is not the limitation.

Please, set these parameters:

  var menuBackColor="#000000";
  var menuBorderColor="#000000";
  var itemBackColor=["#000000","#000000"];
  var itemBorderColor=["#000000","#000000"];