Vertical Flyout Menu Jquery by Deluxe-Menu.com
Vertical Flyout Menu Jquery

Menu Screenshots

Vertical Flyout Menu Jquery Menubar Scripts

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
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 Dropdown Menu Dhtml Vertical Flyout Menu Jquery
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed vertical flyout menu jquery samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
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
Easy Setup
  • De Luxe Tuner. GUI interface to create your vertical flyout menu jquery menus easily and in no time
  • Sensible menu parameters for manual editing



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 have a client that wants a menu bar with all the buttons the same length.
What code might I need to do that

A: You should use individual item styles (you can create it in Deluxe Tuner application). For example:

  var itemStyles = [
["itemWidth=110px"], // 0 - number of the style

  var menuItems = [

["Home","testlink.html", , , , , "0", , , ], // 0 - style 0
["Product Info","", "default.files/icon1.gif", "default.files/icon1o.gif", , , "0", , , ], // 0 - style 0
 ["|Features","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", , , , , , ],
 ["|Installation","", "default.files/icon2.gif", "default.files/icon2o.gif", , , , , , ],

.........


Q: Is it possible to have the AJAX menu aligned vertical instead of horizontal? And is the number of levels limited? (I have a site that requires up to 4 levels...)

A: Yes, you can create vertical menu using AJAX feature.

There is no such limitation.
See the following parameter:
  var dmAJAXCount=0;

That variable set the maximal number of submenus that will be loadedfrom server on your page.



Q: How does one go about changing the parameter or the JavaScript so that a vertical menu selection stays 'on'? In other words, the vertical menu remains selected, perhaps in a background color that shows the user this menu choice is selected and the user is in the selected menu area.

A: To save your navigation path you should set the following parameter:

  var saveNavigationPath = 1;
The menu keeps items highlighted during menu navigation.
0 - disabled, 1 - enabled (default).

You can highlight menu items by default in two ways:

1) Set the pressed item on each page idividually using the following parameter:

  var pressedItem = -2;
The toggle mode. Sets an index of an item that will be highlighted by default.
-2 - the toggle mode is disabled;
-1 - the toggle mode is enabled, but no items highlighted by default;
0,1,2,3,... - index of highlighted item in a top-level menu.
- delete   var pressedItem=1; parameter from your data file
- set correct parameter on each page before you call data file, for example:

<noscript><a href="http://deluxe-menu.com">Javascript Menu by Deluxe-Menu.com</a></noscript>
<script type="text/javascript">  var dmWorkPath = "menudir/";</script>
<script type="text/javascript" src="menudir/dmenu.js"></script>
<script type="text/javascript">  var pressedItem=2;</script>
...
<script type="text/javascript" src="menudir/data.js"></script>

2) Set the pressed item/subitem using dm_ext_setPressedItem () function.

Please see more info here:
http://deluxe-menu.com/highlighted-items-sample.html

Q: Now it works fine in Firefox and mostly in IE.... Only problem... In IE...

When the page with dhtml tab menu first loads ... It does not load the content of the first DIV....
It's fine in Firefox...now IE just does not load the first div... I've tried added a JS function to set to visible the first DIV onLoad...but that does not work either...

Is there anyway to hard-code in ...to set the first DIV to visible?

A: I've just checked your website. Your dhtml tab menu work correctly.

You should check that you use correct value of
  var bselectedItem=1;
parameter.

That is mean that second item in menuItems array will be highlighted.
["-","", "", "", "", "", "", "", "", ], //0
["About","content1", "", "", "", "", "", "", "", ], //1
["FAQs","content2", "", "", "", "", "", "", "", ], //2
["Before & Afters","content3", "", "", "", "", "", "", "", ], //3
["Pre/Post Care","content4", "", "", "", "", "", "", "", ], //4
["Special Offers","javascript:location.href = '../specials/index.htm'", "", "", "", "", "", "", "", ], //5

Now you have also:
<script type="text/javascript" src="data-deluxe-tabs.js"></script>

<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr>

<td align=center valign=top>

<table cellpadding="0" cellspacing="0" border="0" width=500 height=250 align=center>
<tr>
<td valign=top height=1>
<script type="text/javascript" src="../scripts/templates/tabs-opera.js"></script>
</td>
</tr>

I think that it is not correct. You should write:

<table cellpadding="0" cellspacing="0" border="0" width="500">
<tr>

<td align=center valign=top>

<table cellpadding="0" cellspacing="0" border="0" width=500 height=250 align=center>
<tr>
<td valign=top height=1>
<script type="text/javascript" src="data-deluxe-tabs.js"></script>
</td>
</tr>