DHTML Menu Parameters
var pathPrefix="www.mydomain.com/files/"; |
Path prefix for item links and images. |
var saveNavigationPath = 1; |
0 - disable items highlight; 1 - items highlight during menu navigation. Default is 1. |
|
var topDX = 0; |
1st level Submenu X offset. |
var topDY = 0; |
1st level Submenu Y offset. |
var DX = -3; |
Submenu X offset. |
var DY = 0; |
Submenu Y offset. |
|
var absolutePos =
1; |
0-relative
position, 1-absolute position |
var posX = 190; |
X coordinate of
top-left menu corner, if
absolutePos = 1; |
var posY = 160; |
Y coordinate of top-left menu corner, if absolutePos = 1; |
|
var absolutePos =
1; |
0-relative
position, 1-absolute position |
var posX = 190; |
X coordinate of
top-left menu corner, if
absolutePos = 1; |
var posY = 160; |
Y coordinate of top-left menu corner, if absolutePos = 1; |
|
var blankImage =
"img/blank.gif"; |
path to blank
image |
var isHorizontal
= 1; |
0-vertical,
1-horizontal |
var menuWidth =
""; |
width of
top-level menu (% or px), if "" fits to largest item |
|
var absolutePos =
1; |
0-relative
position, 1-absolute position |
var posX = 190; |
X coordinate of
top-left menu corner, if
absolutePos = 1; |
var posY = 160; |
Y coordinate of top-left menu corner, if absolutePos = 1; |
|
var floatable =
1; |
if 1 the menu
"floats" on window scrolling staying always visible |
var
floatIterations = 8; |
defines speed of
floating |
|
var movable = 0; |
if 1
you can drag the menu by using
top spacer |
var moveCursor =
"move"; |
cursor type when
you mouseover the drag spacer |
var moveImage="img/move.gif"; |
image of
the drag spacer |
var moveWidth = 12; |
width of drag spacer |
var moveHeight =
24; |
height of drag spacer |
|
var fontStyle="bold
9pt Verdana"; |
font style |
var fontColor=["#444444","#ffffff"]; |
normal and
mouseover font color |
var
fontDecoration=["none","none"]; |
normal and
mouseover font color decoration
("none", "underline", "line-through", "overline") |
|
var
itemBackColor=["#ffffff","#4792E6"]; |
normal and
mouseover color of item background |
var
itemBorderWidth=0; |
item border width |
var
itemAlign="left"; |
alignment of item text |
var
itemBorderColor=["#6655ff","#665500"]; |
normal and mouseover border color |
var
itemBorderStyle=["solid","solid"]; |
normal and mouseover border style
("none","solid","double","dotted","dashed","groove", "ridge") |
var
itemBackImage=["bkgr1.gif","bkgr2.gif"]; |
normal and
mouseover background image |
var
itemSpacing=0; |
item spacing |
var
itemPadding=4; |
item padding |
var
itemCursor="default"; |
mouseover cursor ("hand", "default", "move"...) |
var
itemTarget="_blank"; |
default target for all items ("_self","_blank","_parent",
"_top"...), if "" target is "_self" |
|
var iconWidth =
16; |
item icon width |
var iconHeight =
16; |
item icon height |
var iconTopWidth
= 24; |
icon width of
top-level menu items |
var iconTopHeight
= 24; |
icon height of
top-level menu items |
|
var menuBackImage=""; |
menu background
image |
var menuBackColor="#ffffff"; |
menu background
color |
var
menuBorderColor="#cccccc"; |
menu border color |
var
menuBorderStyle="solid"; |
menu border style
("none","solid","double","dotted","dashed","groove", "ridge") |
var
menuBorderWidth=1; |
menu border width |
var subMenuAlign
= "left"; |
alignment of submenu item text |
|
var
transparency=75; |
transparency in
%% |
var transition=3; |
transition visual
effect number (0-39) |
var transOptions="options"; |
for more details click here. |
var transDuration=300; |
visual effect
delay in ms |
var
shadowColor="#777777"; |
shadow color |
var shadowLen=3; |
shadow length in
px |
var shadowTop=0/1; |
disable/enable shadow for top menu. Default is 1. |
|
var
arrowImageMain=["arrwm1.gif","arrwm2.gif"]; |
normal and
mouseover arrow images for top-level menu |
var
arrowImageSub=["arrow1.gif","arrow2.gif"]; |
normal and
mouseover arrow images for all submenus |
var arrowWidth
=9; |
arrow width |
var
arrowHeight=9; |
arrow height |
|
var
separatorImage="separ.gif"; |
separator image |
var
separatorWidth="100%"; |
separator width |
var
separatorHeight=3; |
separator height |
var
separatorAlignment="right"; |
separator alignment |
var
separatorVImage=""; |
vertical separator image |
var
separatorVWidth=5; |
vertical separator width |
var
separatorVHeight=16; |
vertical separator height |
|
var
statusString="link"; |
status string,
"link" shows item links, "text" shows item label text, with other strings
shows this string |
|
var
pressedItem=-2; |
Defines an item that will appear
in the highlighted state (-2 - normal mode, -1 - toggle mode is active, but highlighted
item not defined, 0,1,2,3,... - # of pressed item including separators) |
|
var menuItems
= [[..]];
format:
[item_label, item_link, normal_icon, mouseover_icon, tooltip, item_target,
item_style, menu_style]
example:
var menuItems =
[
["Home","testlink.html","icon.gif","iconover.gif","Home
Tip",,"1"],
["|Our Products","testlink.html","icon1.gif","icon2.gif","Our
Products Tip","_blank",,"0"],
];
* item_label:
separator is"-";
sub item text starts with "|" symbol;
* item_target
if "_" the item is inactive/disabled
* item_style and menu_style
you can use individual styles for items or whole submenu.
item_style and menu_style are the
indexes of required style within style arrays, defined in
itemStyles and menuStyles variables,
example
var itemStyles =
[
["fontStyle=normal 9pt Tahoma","fontColor=#000000,#9999ff"],
["itemBackImage=img/iconback3.gif,img/iconback4.gif"],
];
var menuStyles =
[
["menuBackColor=#ffffff","menuBorderStyle=dotted"],
];
Available parameters for items are:
fontStyle = style1,style2
fontColor = color1,color2
fontDecoration = decor1,decor2
itemBackColor = color1,color2
itemBorderColorcolor1,color2
itemBorderWidth = width1,width2
itemBorderStyle = style1,style2
arrowImageMain = img1,img2
arrowImageSub = img1,img2
itemBackImage = img1,img2
itemWidth = number
Available parameters for menus are:
menuBorderWidth = width
menuBorderStyle = style
menuBorderColor = color
menuBackColor = color
menuBackImage = img
|
|
You can modify the menu items "on fly" without the page reloading and refreshing using
apy_changeItem function:
apy_changeItem (nM, nS, nI, newText, newTarget, newTip, newImgOver, newImgOut);
where:
nM - number of menu on page;
nS - number of submenu;
nI - number of item;
newText - new item text;
newTarget - new item target;
newTip - new item tooltip;
newImgOver, newImgOut - new icon images for mouseover and normal state.
examples:
apy_changeItem(0,0,1, 'Apycom', '_blank', 'Apycom Tip', 'img/b092.gif',
'img/b09.gif');
apy_changeItem(0,1,2, '<b>Download!</b>', '', 'Download it!');
|
|
You can create a CSS-based menu.
The menu uses common CSS-styles from the .css-file.
You can specify a css-style for each submenu and item.
For enabling CSS mode following parameters are necessary:
var cssStyle=0/1; - disable/enable css mode;
var cssClass="className";
- general class. For example:
.myClass {...}
...
var cssClass="myClass";
var menuStyles = [ ["CSS=className"] ];
- individual css class for submenu;
var itemStyles = [ ["CSS=classNameNormal,classNameOver"] ];
- individual css class for item.
|
|
You can create a popup menu.
You should set following parameters:
var popupMode=1;
To show a popup menu assign the following function call to event:
yourEvent = "return apy_popup(menuN, pause, event);"
Where:
yourEvent - event type (onMouseOver, onClick, onContextMenu, etc.)
menuN - menu number on page.
pause - inactivity delay.
event - reserved. Do not change.
For example:
<img src="pic" onMouseOver="return apy_popup(0, 2000, event);">
|
|
|
|