Fsmenu Example by Deluxe-Menu.com
Fsmenu Example

Menu Screenshots

Fsmenu Example Javascript Tutorial Cascading Menu

Features

Cost Effective
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!
Web Toolbar Javascript Fsmenu Example
Easy Setup
  • De Luxe Tuner. GUI interface to create your fsmenu example menus easily and in no time
  • Sensible menu parameters for manual editing
Professional Look-n-feel
  • Entirely customizable look-n-feel
  • A lot of pre-designed fsmenu example 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



2.0 Buttons by Web-Buttons.com v3.0.0

Javascript Menu. DHTML Menu.

  • You can set the size of the menu in pixels, percent or other units. The menu may have an absolute or relative position (it can be inserted into the table).
  • Use any necessary font of any color, size and font decoration. Create any available type, thickness and color of a menu's frame.Choose any color for backgrounds of submenus and items.
  • Specify various values for padding and spacing 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 had to put the site live and had taken out the white border. I've used one of the better elements of your application and put a second data file (data1.js) and a sample page up that recreates the aberrant behavior in IE and the missing border-bottom in Firefox and Opera.

In IE, the entire border of each element has about a 5px white border until you mouseover each element. Then the border-bottom (1px solid white) shows correctly.

In both Firefox and Opera the border doesn't show at all.


A: Try to write so:

  var absolutePos=1;
  var posX="10";
  var posY="400";

  var itemStyles = [
["itemBorderWidth=0 0 1px 0","itemBorderStyle=solid,solid","itemBorderColor=#FFFFFF,#FFFFFF"],
];


Q: The menu files need to be in EVERY directory that there is a page calling these files?


A: No you can use one folder with engine .js files.
But in your html pages you should write correctly your dmWorkPathparameter:

< script type="text/javascript">  var dmWorkPath = "./menudir/";</script>

and call dmenu.js file from the right place

<script type="text/javascript" src="./menudir/dmenu.js"> </script>


Q: There is a default gap between two collapsible javascript menu buttons. Suppose the two menu are "Company profile" and "Service", there is a default gap between those tow , it is not taking the specified space( for example I am putting 2px gap but it is taking a default gap) Please suggest me the solution for the same.

A: You should use new parameter in the data file:

  var tXPMenuSpace=0;



Q: Is there any way I can do the opposite and make the space my separators take up only a few pixels high? At present I can only make them the same height as the other buttons even though the separator image is only 2 pixels high.


A: 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="";