Apycom Software Apycom DHTML Menu   
Apycom Home DHTML Menu Home Purchase Download Contact
Main Examples How to Setup Parameters License

DHTML Menu Parameters

Param Comment

Added in v2.72

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.

Added in v2.70

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 = [[..]];

[item_label, item_link, normal_icon, mouseover_icon, tooltip, item_target, item_style, menu_style]

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,

var itemStyles =
    ["fontStyle=normal 9pt Tahoma","fontColor=#000000,#9999ff"],
var menuStyles =

Available parameters for items are:

fontStyle = style1,style2
fontColor = color1,color2
fontDecoration = decor1,decor2
itemBackColor = color1,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);

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.


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);"

    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);">

Copyright (c) 1998-2010, Apycom Software

bootstrap image gallery | bootstrap gallery | website designing software | bootstrap menu | css menu maker