Javascript Scrollable Dropdown by Deluxe-Menu.com
Javascript Scrollable Dropdown

Template:

Orange Green Menu Template - Website Drop Down Menu






    - Filters and Transitional effects
    - Search feature - add the search area in the menu and type symbols.
    - Image arrows
    - Keyboard navigation - press Ctrl+F2 to enter the top menu
    - AJAX menu loading - loads web menu data from the server "on-the-fly".
    - Unlimited number of sub levels
    - Horizontal or vertical orientation
    - Relative/Absolute menu position




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

Menu Screenshots

Javascript Scrollable Dropdown Javascript Navigation Menu

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

Features

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
Easy Setup
  • De Luxe Tuner. GUI interface to create your javascript scrollable dropdown menus easily and in no time
  • Sensible menu parameters for manual editing
Vertical Menu Style Javascript Scrollable Dropdown
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed javascript scrollable dropdown 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
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.

  • Setup menu parameters manually or using De Luxe Tuner. Then add some rows of a code within html page code and your menu is ready!
  • Use special Java Script methods for: Dynamic changing of items (link, text, icons, arrows and even individual style!). Addition/removing of items or submenus. Disabling and enabling menu items. Getting the info on every submenu, menu, and items. Changing appearance of items. Other coding tricks.
  • Cross-frame mode lets you to construct full-featured dhtml menus on the pages with frames. But for all that frame set it's not necessary to insert any additional code into all the pages - just specify several extra menu parameters.
  • Ability to handle the menu from the keyboard via keystrokes.
Buy Now!   ::  Free Trial Download   ::  More Info

Recent Questions

Q: I have small problems with your javascript menu system.

#1. I am creating a multi-level menu, am I limited to a gird format or can every item have a variable column width?

#2. With submenus, I want to have the submenu be the same width as the parent cell, is there a simple command for this, or do I have to guess the column widths until it fits correctly?

#3. In those same submenus, I have items that are longer than the parent, is there a word wrap or a way to define a break, rather than having the scroll feature?


A: 1) You should use Individual Item Styles.
For example:
  var itemStyles = [
    ["itemWidth=120","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#ACF88B,#ACF88B","itemBorderColor=#329309,#329309"], //style0
    ["itemWidth=100","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#FFFFFF,#FFFFFF","itemBorderColor=#1B92E9,#1B92E9"], //style1
    ["itemWidth=130","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#FF9684,#FF9684","itemBorderColor=#EC7575,#EC7575"], //style2
    ["itemWidth=150","itemBorderWidth=1","itemBorderStyle=solid,solid","itemBackColor=#84F9FF,#84F9FF","itemBorderColor=#00B8C1,#00B8C1"], //style3
];
  var menuStyles = [
    ["smColumns=2"], //style0
];

    ["Home","testlink.htm"],
    ["Samples","testlink.htm"],
      ["|Group 1","", , , , , "0", , , ],
      ["|Group 2","", , , , , "1", , , ],
      ["|Group 3","", , , , , "2", , , ],

...
    [" More Samples","testlink.htm"],
      ["|Group 1","", , , , , "3", "0", , ],
      ["|Group 2","", , , , , "1", , , ],

Where "0", "1", "2", "3" - style number in itemStyles.

2) You can also use Individual Item Styles.

  var itemStyles = [
     ["itemWidth=120px"],
];
  var menuStyles = [
     ["smWidth=120px"],
];

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

3) Try to set this parameter:

  var noWrap=0;


Q: I'm am try to use your Deluxe drop down menu generator and can not get it to work..

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.

When you open Deluxe Tuner 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://deluxe-menu.com/parameters-info.html
http://deluxe-menu.com/menu-items-info.html

You can also use Individual Styles for items and subitems
http://deluxe-menu.com/individual-item-styles-info.html
http://deluxe-menu.com/individual-submenu-styles-info.html

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

So, you'll have folder with all engine files and images("Deluxe-menu.files/" folder by default), Deluxe-menu.html file anddata-Deluxe-menu.js file with all menu parameters.

Open Deluxe-menu.html file in any text editor and copy several rows ofcode into your page (for example index.html page of your website).

Copy and paste several rows into your html page (index.html).

<head>
...
<!-- Deluxe Menu -->
<noscript><a href="http://deluxe-menu.com">drop down menu generator by deluxe-menu.com</a></noscript>
<script type="text/javascript">  var WorkPath="Deluxe-menu.files/";</script>
<script type="text/javascript" src="Deluxe-menu.files/dmenu.js"></script>
...
</head>

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

You should also copy "Deluxe-menu.files/" folder with all engine files
dmenu.js
dmenu4.js
dmenu_add.js
dmenu_dyn.js
dmenu_key.js
dmenu_cf.js
dmenu_popup.js
dmenu_ajax.js
dmenu_search.js
and data-Deluxe-menu.js file into the same folder with your index.html page.

Try that.

Q: I built the menu and tried it in my site and I see nothing but text. No Block arrangement as in the preview within the builder.


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

Probably that you have overlooked to add dmenu.js file or images onyour server.


Q: If I don't set   var tabMode=1 instead of   var tabMode=0 in drop menu maker the links will not work at all.

A: See in Deluxe Tabs there are two modes:
1.   var tabMode=0;
You can create only one level of tabs and assign Object Id's of theDIV's to show when you click on the tab.

["XP Tab 1","content1", "", "", "", "", "", "", "", ],
["XP Tab 2","content2", "", "", "", "", "", "", "", ],
["XP Tab 3","content3", "", "", "", "", "", "", "", ],
["XP Tab 4","content4", "", "", "", "", "", "", "", ],

2.   var tabMode=1;
You can assign only links in this mode.
You should create top level items with subitems.

["XP Tab 1","", "", "", "", "", "", "", "", ],
 ["|Link 1_1","http://deluxe-tabs.com", "", "", "", "", "0", "", "", ],
 ["|Link 1_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 1_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 2","", "", "", "", "", "", "", "", ],
 ["|Link 2_1","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 2_5","testlink.htm", "", "", "", "", "0", "", "", ],
["XP Tab 3","", "", "", "", "", "", "", "", ],
 ["|Link 3_1","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_2","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_3","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_4","testlink.htm", "", "", "", "", "0", "", "", ],
 ["|Link 3_5","testlink.htm", "", "", "", "", "0", "", "", ],


You can use Object ID as well as Link in both modes. Use the following prefixes within item's link field:
"object:" - means that there is object id after it;
"link:" - means that there is a link after it.
"javascript:" - means that there is a javascript code after it, for example:javascript:alert(\'Hello!\')

So, you should write for example:

 ["|Link 1_1","object:Content1_1", "", "", "", "", "0", "", "", ],



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