|
|
Parameters of DHTML Navigation Menu
You should place the following parameters (vars) within data.js file.
|
Special parameters
|
|
var dmWorkPath = "menu_files_path/";
|
You should define this parameter before you call dmenu.js on your page. dmWorkPath parameter should point to the same folder with dmenu.js file.
For example, if your index page is situated in content/ directory and all engine .js files are in content/menu/ directory, the dmWorkPath parameter must be set to "menu/".
Notice! : you should place slash "/" at the end of the path.
For more info see installation info.
|
|
|
|
Common
|
|
Multi-row support
|
To make a new row in a multi row menu add '$' symbol before an item text.
|
var isHorizontal = 1;
|
Orientation of javascript menu: 0 - vertical, 1 - horizontal.
|
var smColumns = 3;
|
Quantity of columns in each submenu. Default is 1.
|
var smOrientation = 0;
|
Submenu orientation: 0 - vertical (default), 1 - horizontal.
|
var smViewType = 0;
|
Set the way of displaying the menu.
0 - from left to right,
1 - from left to right + upwards,
2 - from right to left,
3 - from right to left + upwards (for right-to-left languages).
|
var dmRTL = 0;
|
If you're using right-to-left direction of html page <HTML dir=rtl> set this parameter to 1.
Default value is 0.
|
var pressedItem = -2;
|
The toggle mode. This parameter sets an index of an item highlighted by default.
-2 - the toggle mode is disabled;
-1 - the toggle mode is enabled, but no items will be highlighted by default;
0,1,2,3,... - index of highlighted item in a top-menu.
|
var itemCursor = "pointer";
|
Sets items cursor.
Available values: "auto", "default", "pointer", "move", "crosshair", "text", "wait", "help".
|
var itemTarget = "_blank";
|
Sets the default target for all menu items.
The following values are available for target parameter: "_self", "_blank", "_parent", "_search", "_top".
You can also specify a frame name.
|
var statusString = "tip";
|
Text in a browser's status bar when you put a pointer over an item. Available values:
"link" - show item link;
"text" - show item text;
"tip" - show item tip.
With another value shows specified value.
|
var blankImage = "img/blank.gif";
|
Path to a blank image.
It's a GIF image with a transparent background, size 1x1 px.
|
|
|
|
Dimensions
|
|
var menuWidth = '400px';
|
Menu width in (px, % or other units).
We advise you to set an exact value to this parameter for a correct menu positioning in various browsers.
|
var menuHeight = "40px";
|
Height of the menu in (px, % or other units).
|
var smWidth = 200;
|
Width of all sub menus.
|
var smHeight = 500;
|
Height of all sub menus.
|
|
|
|
Positioning
|
|
var absolutePos = 1;
|
You can use relative and absolute menu position.
0 - relative DHTML navigation menu position (for example, menu can be placed inside a DIV or a Table);
1 - absolute menu position (menu uses absolute coordinates on a page).
|
var posX = 100; var posY = 100;
|
Sets X and Y coordinates of a top-left corner of the menu.
Works if var absolutePos = 1;
You can set values in px or % (e.g. 100, "30px", "50%").
|
var topDX = 0; var topDY = 0;
|
X and Y offsets for 1st-level sub menus.
|
var DX = -3; var DY = 0;
|
X and Y offsets for sub menus.
|
var subMenuAlign = "left";
|
Horizontal alignment for submenus.
"left", "center", "right" - alignment reative to the parent item;
"pleft", "pcenter", "pright" - alignment reative to the parent submenu.
|
var subMenuVAlign = "top";
|
Submenus vertical alignment.
"top", "center", "bottom" - alignment reative to the parent item;
"ptop", "pcenter", "pbottom" - alignment reative to the parent submenu.
|
|
|
|
Font
|
|
var fontStyle = "bold 9pt Verdana";
|
Font style.
|
var fontColor = ["#444444","#FFFFFF"];
|
Font color normal and mouseover states.
|
var fontDecoration = ["none","underline"];
|
Normal and mouseover font decoration.
Available values: "none", "underline", "line-through", "overline".
|
var fontColorDisabled = "#AAAAAA";
|
The item is disabled when you set its target in the following way "_".
Font color for a disabled item.
|
|
|
|
Appearance
|
|
var menuBackColor = "#FFFFFF";
|
Background color of the dhtml menu and all the sub menus.
|
var menuBackImage = "back.gif";
|
Background image for the dhtml menu and all the submenus.
|
var menuBackRepeat = "repeat-x";
|
Repeating of background of the menu and all the submenus.
Available values: "repeat", "repeat-x", "repeat-y", "no-repeat".
|
var menuBorderColor = "#CCCCCC";
|
Border color of the menu and all the submenus.
|
var menuBorderWidth = 1;
|
Border width for the menu and all the submenus.
|
var menuBorderStyle = "solid";
|
Border style for the menu and all the sub menus.
Available values: "none", "solid", "double", "dotted", "dashed", "groove", "ridge".
|
|
|
|
Item Appearance
|
|
var itemBackColor = ["#FFFFFF","#4792E6"];
|
Color of items' background for normal and mouseover states.
|
var itemBackImage = ["back_n.gif","back_o.gif"];
|
Normal and mouseover images of items' background.
|
var beforeItemImage = ["left_n.gif","left_o.gif"];
|
Left-side images for normal and mouseover states.
|
var afterItemImage = ["right_n.gif","right_o.gif"];
|
Right-side images for normal and mouseover states.
|
var beforeItemImageW = "";
|
Width of the left-side image.
|
var afterItemImageW = "";
|
Width of the right-side image.
|
var beforeItemImageH = "";
|
Height of the left-side image.
|
var afterItemImageH = "";
|
Height of the right-side image.
|
var itemBorderWidth = 0;
|
Items' border width.
|
var itemBorderColor = ["#6655FF","#665500"];
|
Normal and mouseover colors of items' border.
|
var itemBorderStyle = ["solid","dotted"];
|
Normal and mouseover styles of items' border.
Available values: "none", "solid", "double", "dotted", "dashed", "groove", "ridge".
|
var itemAlignTop = "left";
|
Text alignment for top items.
Values: "left", "center", "right".
|
var itemAlign = "left";
|
Text alignment for submenu items.
Values: "left", "center", "right".
|
var itemSpacing = 0;
|
Item spacing.
|
var itemPadding = "4px";
|
Item padding.
You can also set multiple values, for example:
"10px 15px 10px 5px";
(top, right, bottom, left)
|
|
|
|
Floatable Menu
|
|
var floatable = 1;
|
Use this parameter to create a floatable menu - when the page is scrolled the menu remains visible.
0 - disabled, 1 - enabled.
|
var floatableX = 1; var floatableY = 1;
|
Set a floatable ability for the menu along X and Y axes.
0 - disabled, 1 - enabled.
|
var floatIterations = 6;
|
Sets a floatation speed. The less the value is the more the speed is.
|
|
|
|
Movable Menu
|
|
var movable = 0;
|
Creates a movable menu - you can use a mouse to move a menu and submenus as a usual windows.
|
var moveCursor = "move";
|
Cursor type when you mouseover the drag spacer.
|
var moveImage = "move.gif";
|
Image of the drag spacer.
|
var moveWidth = 12; var moveHeight = 24;
|
Width and height of the drag spacer.
|
var moveColor = "#AA0000";
|
Background color of the drag spacer.
|
var smMovable = 0;
|
Enables MS Office toolbar-like mode - you can drag submenus and separate them from the parent ones.
|
var closeBtn = "btn_image.gif";
|
Image for a close-button for submenus.
|
var closeBtnW = 15; var closeBtnH = 15;
|
Width and height of a close-button image.
|
|
|
|
Icons
|
|
var iconTopWidth = 24; var iconTopHeight = 24;
|
Width and height of icons for top-level menu items.
|
var iconWidth = 16; var iconHeight = 16;
|
Width and height of icons for submenu items.
|
var arrowImageMain = ["img1.gif","img2.gif"];
|
Top-level arrow images for normal and mouseover states.
|
var arrowImageSub = ["arrow1.gif","arrow2.gif"];
|
Submenu items arrow images for normal and mouseover states.
|
var arrowWidth = 9; var arrowHeight = 9;
|
Width and height of arrow icons.
|
|
|
|
Transitional Effects & Filters
|
|
var transparency = 75;
|
Transparency of submenu in %.
|
var transition = 3;
|
Index of a transitional effect (0-39).
Set it to -1 if you don't want to have effects at all.
|
var transOptions = "options_string";
|
Extra parameters for transitional effects with var transition > 24;
|
var transDuration = 300;
|
Delay of a transitional effect (in ms) on submenu's showing.
|
var transDuration2 = 200;
|
Delay of a transitional effect (in ms) on submenu's hiding.
|
var shadowColor = "#777777";
|
Color of shadow.
|
var shadowLen = 3;
|
Length of shadow.
|
var shadowTop = 1;
|
Show/hide a shadow for a top-menu: 0 - hide, 1 - show.
|
|
|
|
Separators
|
|
var separatorImage = "img.gif";
|
Separator's image.
|
var separatorWidth = "100%";
|
Width of a horizontal separator (in px, %).
|
var separatorHeight = 3;
|
Height of a horizontal separator (in px).
|
var separatorAlignment = "right";
|
Alignment of a horizontal separator.
|
var separatorVImage = "img.gif";
|
Vertical separator's image.
|
var separatorVWidth = 5;
|
Width of a vertical separator (in px).
|
var separatorVHeight = 16;
|
Height of a vertical separator (in px, %).
|
var separatorPadding = "5px";
|
Separators' padding.
You can set multiple values, for example:
"10px 15px 10px 5px";
(top, right, bottom, left)
|
|
|
|
CSS Support (CSS-based Menu)
|
|
var cssStyle = 0;
|
Turn on CSS mode. CSS mode allows you to use your own CSS styles for all elements in the menu.
0 - disabled (default), 1 - enabled.
|
var cssSubmenu = "class";
|
CSS class name for sub menus.
|
var cssItem = ["classNormal","classOver"];
|
Normal and mouseover CSS class names for items.
|
var cssItemText = ["classNormal","classOver"];
|
Normal and mouseover CSS class names for a text of items.
|
|
|
|
Advanced
|
|
var dmObjectsCheck = 0/1;
|
Checking of intersection with flash movies, selects, iframes, etc.
0 - disabled (default), 1 - enabled.
|
var pathPrefix_img = "mydomain.com/images/";
|
Path prefix for menu images.
This string will be added for all image paths in the javascript menu.
|
var pathPrefix_link = "mydomain.com/content/";
|
Path prefix for menu links.
This string will be added for all menu links.
|
var saveNavigationPath = 1;
|
Keeps items highlighted during dhtml menu navigation.
0 - disabled, 1 - enabled (default).
|
var showByClick = 0;
|
Allow you to show submenus on a mouse click only.
0 - disabled (default), 1 - enabled.
|
var noWrap = 1;
|
Turn on a wordwrap for items' text.
0 - disabled, 1 - enabled (default).
|
var smHidePause = 1000;
|
A delay (in ms) between mouse is shifted from sub menu and its closing.
You can compel submenus to stay visible till you click outside the menu or scroll your page.
To enable this feature you should set this parameter in the following way: var smHidePause = -1;
|
var smShowPause = 200;
|
A delay (in ms) after that sub menu will be shown when mouse pointer is over the menu item.
|
var smSmartScroll = 1;
|
Submenus smart scrolling.
0 - disabled, 1 - enabled (default).
|
var topSmartScroll = 1;
|
Top menu items smart scrolling (works if var menuWidth isn't empty only).
0 - disabled, 1 - enabled (default).
|
var smHideOnClick = 1;
|
Allow you to hide all submenus on item click.
0 - disabled, 1 - enabled (default).
|
var dm_writeAll = 0;
|
Set it to 0 if you have a big menu - it'll increase loading speed.
It's recommended to set this parameter to 1 when you're changing your menu "on-the-fly" using Javascript API (var dynamic=1).
Default is 0.
|
var useIFRAME = 0;
|
Always use iframe with the menu. It helps to overlap objects correctly.
0 - disabled (default), 1 - enabled.
|
var dmSearch = 0;
|
Possibility to add search bar in the menu. To add it set item's link to "search:" and variable dmSearch=2;
Available values: 0-nosearch; 1-ordinary search (within one level of submenus only); 2-recursive (within the whole menu);
|
|
|
|
AJAX-like Technology (new! v2.0)
|
|
var dmAJAX = 0;
|
AJAX-like technology allows to populate data for submenus "on-the-fly" from the server. You should set exact value for var dmAJAXCount when using this technology.
0 - disabled (default), 1 - enabled.
Supported browsers
Windows OS: IE5+, Firefox, Mozilla, Netscape 7+, Opera 8+
MAC: Safari.
|
var dmAJAXCount = 20;
|
Maximal number of sub menus that will be loaded from server.
Default is 0.
|
var ajaxReload = 0;
|
always reload ajax submenu when re-call.
0 - disabled (default), 1 - enabled.
|
|
|
|
Dynamic Menu (Javascript API)
|
|
var dynamic = 0;
|
DHTML Menu has several external Javascript API functions that allow you to change the menu "on the fly".
To enable these functions set the parameter to 1.
Dynamic functions are placed in dmenu_dyn.js file.
|
|
|
|
Keystrokes Support
|
|
var keystrokes = 0;
|
Turn on keystrokes support.
0 - disabled (default), 1 - enabled.
Ctrl+F2 - enter the menu/switch to next menu on the page.
Arrow keys - navigate.
Enter - enter the menu.
Esc - exit the menu.
|
var dm_focus = 1;
|
Show focus selection for selected item.
|
var dm_actKey = 113;
|
Key code for keystrokes activation.
Works with Ctrl key only.
Default value is 113 = F2 key, 114 = F3 key, 115 = F4 key, etc.
|
|
|
|
Popup Mode (Context Menu)
|
|
var popupMode=1;
|
Use this parameter to create pop up menu.
Assign the code in the following format to the object's event to show the menu:
return dm_popup(menuInd, pause, event, x, y)
For example:
<img onClick="return dm_popup(0, 1000, event)">
|
|
|
|
Sound
|
|
var onOverSnd=""; and var onClickSnd="";
|
Click and mouseover sounds.
This effect supported by IE only.
|
|
|
|