Extjs Menu Example by Deluxe-Menu.com
Extjs Menu Example

Menu Screenshots

Extjs Menu Example Javascript Tutorial Drop Down Menus

Features

Cost Effective
Easy Setup
  • De Luxe Tuner. GUI interface to create your extjs menu example menus easily and in no time
  • Sensible menu parameters for manual editing
Javascript Expanding Cascading Menu Extjs Menu Example
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!
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed extjs menu example samples
  • Hundreds of visual effects
  • Custom CSS styles can be applied for all menu settings



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 recently downloaded your menu, I love, and am definitely going to purchase it, however i do have a question, I made my site with dreamweaver mx, and it is designed in a series of tables, the main table is 3 column and on row, stretched at 100% width and length, the other tables are nested inside the middle column, I am trying to get the menu in the left column to float, I have read some of the other post in the support section, and I was wondering if their could be any <div> anywhere on the page or just before and after the menu script code?

here is the way my code is before and after the script code

<td width="17%" align="left" valign="top" background="images/LPback.png">
<script type="text/javascript" src="data.js"></script>
</td>
this defines the column in which I want the menu to be,

here is my code for the floatable menu
//--- Positioning
  var tabsolute=1;
  var tleft="0px";
  var ttop="205px";

//--- Floatable Menu
  var tfloatable=1;
  var tfloatIterations=10;
  var tfloatableX=1;
  var tfloatableY=1;


A: You should add the following parameter:

<script type="text/javascript">  var tWorkPath="data.files/";</script>

See more info about installation here:
http://deluxe-tree.com/installation-info.html

You should also add dtree_add.js file in the "data.files/" folder.


Q: I’m trying to add a padding before the beforeItemImage for the sub navigation bar but I can’t do it after hours off trying it.

A: You should add a separator with blank (or white) image.
  var separatorVImage="deluxe-menu.files/space.gif";
  var separatorVWidth="7px";
  var separatorVHeight="27px";
  var separatorPadding="0px";

And assign Individual style for this item
["itemBorderWidth=0","itemBorderStyle=none,none"],




Q: I have been using Deluxe Menu quite a bit, but am now running into a problem on a site I developed. When I add a submenu, it appears separated by about 100 pixels down. In this case I left it on the Menu Item “Why Maumelle” for you to look at.

Can you help me out?


A: See, 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:relative"). To get the value you should move .css style into style="" attribute.

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

For example, you should add style="position:relative;"

to the

<DIV class=MainBody>
<DIV class=Banner></DIV>
<DIV class=Menu>

So, you'll have:

<DIV class=MainBody style="position:relative;">
<DIV class=Banner></DIV>
<DIV class=Menu style="position:relative;">

Now we have only such solution for this problem.
We'll try to fix this problem in the future versions.


Q: I need to know how to have the background in the main menutransparent, and then the sub-menu/s a different translucent color.
Or, the background for the main menu one color, and the sub-menu/s a different color..

A: To set transparent background for the menu you should set:

  var menuBackColor="transparent";
  var itemBackColor=["transparent","transparent"];

and use Individual Item Styles for your submenus:

  var itemStyles = [
["itemBackColor=#8EE8E1,#26BBB0"], //style0
["itemBackColor=#F4B7FB,#E65AF5"], //style1
];

  var menuItems = [

["Home","testlink.html", "", "", "", "", "", "", "", ],
["Product Info","", "default.files/icon1.gif", "default.files/icon1o.gif", "", "", "", "", "", ],
 ["|Features","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "0", "", "", ], //style0
 ["|Installation","", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "1", "", "", ], //style1
   ["||Description of Files","testlink.html", "default.files/icon6.gif", "default.files/icon6o.gif", "", "", "", "", "", ],
   ["||How To Setup","testlink.html", "default.files/icon6.gif", "default.files/icon6o.gif", "", "", "", "", "", ],
 ["|Parameters Info","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "0", "", "", ], //style0
 ["|Dynamic Functions","testlink.html", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "1", "", "", ], //style0
 ["|Supported Browsers","", "default.files/icon2.gif", "default.files/icon2o.gif", "", "", "0", "", "", ], //style0
   ["||Windows OS","", "default.files/icon3.gif", "default.files/icon3o.gif", "", "", "", "", "", ],
   ["||Internet Explorer","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||Firefox","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||Mozilla","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||Netscape","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||Opera","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],
   ["||MAC OS","", "default.files/icon3.gif", "default.files/icon3o.gif", "", "", "", "", "", ],
   ["||Firefox","", "default.files/icon5.gif", "default.files/icon5o.gif", "", "", "", "", "", ],