Zen Cart Flyout Menu by Deluxe-Menu.com
Zen Cart Flyout Menu

Menu Screenshots

Zen Cart Flyout Menu Javascript Examples

Features

Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed zen cart flyout menu samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings
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
Web Interface Software Cross Browser Zen Cart Flyout Menu
Easy Setup
  • De Luxe Tuner. GUI interface to create your zen cart flyout menu menus easily and in no time
  • Sensible menu parameters for manual editing
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!
Cost Effective



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • Sub menus dropdown over all the objects on the page (select, applet, flash, object, embed). If for some reasons (old browser) a submenu can't go over an object, the object will be hidden for a time when the submenu is shown.
  • Design personal styles for any submenu and item. Use individual styles to rich killer visual effects!
  • These effects will make your menu neat and chic. You can set transparency, cast a shadow on the menu and submenus. Among available special visual effects there are random dissolve, fade, mix, mosaic slide out and many many others.

Recent Questions

Q: I am not professional website developer … I’ve installed your trial software … but not able to add navigation menu tree in my website. Can you please guide me how I can add tree menus in left side bar of website?

A: Unfortunately we don't have step by step tutorial yet.
We'll try to create it in the nearest time.

1. Create your menu in Deluxe Tuner application.
You can create any menu you like in Deluxe Tuner.

You can use ready to use templates. You can find them in the templateswindow.

When you open Deluxe Tuner ( Deluxe Tree ) you can click "File/New"and add items and subitems using buttons "Add Item" and "Add Subitem" onthe main window.

You should set items and subitems parameters on the "Item Parameters"window.
See also other parameters for the menu on the main window.

More info about menu parameters you can find on our site
http://www.deluxe-tree.com/parameters-info.html

You can also use Individual Styles for items and subitems.

2. You should install the tree menu on your page.
You can click, for example, File/Export to HTML.

Add several rows into your html page.

<head>
...
<!-- Deluxe Tree -->
<noscript><a href="http://deluxe-tree.com">Javascript Tree Menu by Deluxe-Tree.com</a></noscript>
<script type="text/javascript">  var tWorkPath="deluxe-tree.files/";</script>
<script type="text/javascript" src="deluxe-tree.files/dtree.js"></script>
<!-- (c) 2006 - 2007, http://deluxe-tree.com -->
...
</head>

<body>
...
<table>
<tr><td><script type="text/javascript" src="menudir/data-tree.js"></script> </td></tr> //data-tree.js - data file created in Deluxe Tuner.
</table>
...
</body>

You should also copy all engine files
dtree.js - menu engine file
dtree_add.js - additional module for floatable/movable menus
dtree_dyn.js - additional module with Javascript API to change the menu "on-the-fly"
dtree_ajax.js - additional module with the AJAX-like support

into "deluxe-tree.files/" folder. You should place this folder in thesame folder with your index.html page.
Try that.



Q: Suppose if I get the single user license, then I see I wont be able to see the javascript code. If I have to handle events like clicking a tab or hover over a tab, how do I do it for the tab menu javascript?

A: Actually there is no need to change our source code to handle these events.
Actually you can use your own Javascript code instead standard links and html code inside item text. For example:

  var bmenuItems = [
["text", "javascript:your_code_here"]
];

or

  var bmenuitems = [
["<div onClick='urlSubstitution(\'transco/sheet.asp?stype=1\')'>Table of Contents</div>", ""]
];



Q: 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 drag drop menu.

A: You can try to use pop up drag drop menu.

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: I have Deluxe-Menu v2.0.

1. When I make an Item a Seperator using '-' on main menu Items (on a menu verticale javascript) it does NOT work (leaves a blank row) but when I make an Item a Separator using '-' on a Subitem it DOES work (uses the Separatorimage). Why ?

Can I make an Item a Separator on the main menu and get it to use the Separatorimage ?

2. If I set the text value to empty on a main menu Item and then add image paths in the Normal and Mouse Over Icon fields in Item Parameters, all I get on my preview is an image placeholder with a Red X but when I set the text value to empty on a SubItem and then add image paths in the Normal and Mouse Over Icon fields in Item Parameters, the preview DOES show the image. Why ?

How can I get the image to show on the main menu verticale javascript Item ?

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

  var menuItems = [
["Home","index.cfm", , , , , , , , ],
["-"],
["About Us","about.cfm", , , , , , , , ],];Please, see the following parameters:

//--- Separators  var separatorImage=""; //for subitems
  var separatorWidth="100%";
  var separatorHeight="3px";
  var separatorAlignment="right";
  var separatorVImage="images/public/separator.gif"; //for the top items
  var separatorVWidth="100%";
  var separatorVHeight="2px";
  var separatorPadding="";

You can send us a copy of your html page (including .js files) ora direct link to your website, so we can check it.

2.You can send us a copy of your html page (including .js files andimages), so we can check it.