|
Tigra Menu PRO is a flexible menu solution for commercial applications offering high reliability and wide browsers support.
Menu is written to work on any browser capable of generic DHTML offering the best compatibility on the market.
Here is a table of the application compatibility:
| Platform | Browser | ||||
|---|---|---|---|---|---|
| MS IE | Netscape | Mozilla | Opera | AOL | |
| Windows 95/98/ME/2000/XP | 4.0+ | 4.01+ | 0.9+ | 5.02+ | 4+ |
| Mac OS 8/9/X | 4.0+ | 4.01+ | 0.9+ | 5.02+ | 4+ |
| KDE on Linux/FreeBSD | n/a | 4.7+ | 0.9+ | n/a | n/a |
Innovative ideas involved in Tigra Menu PRO make it ready for future browser versions.
Although all data required for menu to function properly may reside in single html document it is not efficient in most cases. Dividing data into several files makes menu maintenance easier. This technique also reduces network load allowing clients to use cached files on sites with multiple pages.
Default configuration contains:
File indexes may be added to file names and structure names if multiple menus used. For example style sheet for menu with index 1 may have name menu_1.css.
All files should be attached to HTML document with appropriate tags in header:
<head> <title>JavaScript Menu</title> <link rel="stylesheet" href="menu.css"> <script language="javascript" src="menu.js"></script> <script language="javascript" src="menu_items.js"></script> <script language="javascript" src="menu_tpl.js"></script> </head>
Geometry settings are JavaScript structure that describes how menu blocks and items are positioned and sized at different levels. This structure also contains some common menu configuration info.
Picture and code sample below show how menu parameters are set with geometry settings structure. Cases illustrated are highlighted in code sample with blue background.
var MENU_POS = new Array(); // A. Item's width in pixels MENU_POS['width'] = [100, 130, 160, 190, 220]; // B. Item's height in pixels MENU_POS['height'] = [25, 25, 25, 25, 25]; // C. Horizontal Offset between the items within level in pixels MENU_POS['left'] = [101, 0, 0, 0, 0]; // D. Vertical Offset between the items within level in pixels MENU_POS['top'] = [0, 26, 26, 26, 26]; // E. Horizontal Offset between adjacent levels* in pixels MENU_POS['block_left'] = [5, 0, 120, 140, 160, 180]; // F. Vertical Offset between adjacent levels* in pixels MENU_POS['block_top'] = [50, 26, 10, 10, 10]; // Time delay in milliseconds before menu collapses after mouse pointer left all items** MENU_POS['hide_delay'] = [200, 200, 200, 200, 200]; // Path to transparent gif 1x1 px as it appears in src attribute of <img> tag MENU_POS['pixel_path'] = 'pixel.gif'; // Horizontal menu alignment - (left, center, right) *** MENU_POS['align'] = 'center'; // Vertical menu alignment - (top, center, bottom) **** MENU_POS['valign'] = 'top'; // Static positioning configuration - (none, vertical, horizontal, both) **** MENU_POS['scroll'] = 'none';
* - This parameter for root level (the one with index 0) is menu offset from the document's left upper corner, so use it for menu positioning on the page
** - Menu items may have some spacing between so delay is applied before menu collapses after mouse pointer left the item. Bigger distances - more delay may be required
*** - Feature is available from v2.0
**** - Feature is available from v3.0
Each level of menu is configured independently. Parameters assigned array value. Each element of array corresponds menu level with the same index. More levels expected - more elements required for each parameter. Given menu example has five levels so all arrays have five elements as well.
Menu items are JavaScript structure that describes menu elements presented in menu tree and their relations. Item's individual parameters are configured within this structure as well.
Structure assigned array value with list of root items. Each Item is array itself containing three or more elements. Those elements are:
Only first element is required. All others are optional. When assigning value to element with higher index null value should be specified for missing elements with lower indexes to keep elements order. See code samples below.
Caption defines text or html that will be printed within item's rectangle. This field may be assigned string or three element array with captions for different states of item. Those states are:
Picture and code sample below shows how caption is defined for menu item.
Link defines text that will be inserted into href attribute of item's anchor tag. Usually this is page URL, but any appropriate value is possible.
var MENU_ITEMS = [
['level 0 item 0', 'http://www.softcomplex.com/'], // Site URL
['level 0 item 1', 'ftp://ftp.softcomplex.com/'], // Link to FTP
['level 0 item 2', 'mailto:[email protected]'], // Mailto link
['level 0 item 3', "javascript:alert('Hello World!');"], // Script statement
];
This field may also be assigned three element array* to allow additional link related parameters. Those elements are:
* - This feature is available from ver. 1.1 of Tigra Menu PRO. Contact support if you need upgrade.
var MENU_ITEMS = [ ['SoftComplex', ['http://www.softcomplex.com/', 'content_frame', 'Visit official site']], ];
This field defines position and size of the item if these parameters should differ from ones specified in the geometry settings structure. Individual geometry settings are specified as four element array with values for:
* - for first root element origin point is left upper corner of the page (case A on the picture below), for all first elements or other levels origin point is left upper corner of parent item (case B), for all other items origin point is left upper corner of previous item in the same level (case C).
Any of those four elements may be assigned null value. In such case corresponding parameter is taken from the geometry settings structure
Picture and code sample below shows how individual geometry for items is set. Cases illustrated are highlighted in code sample with blue background.
var MENU_ITEMS = [ ['level 0 item 0', null, [10, 10, 150, 150]], // case A ['level 0 item 1', null, [20, 20, 125, 125], // case C ['level 1 item 0', null, [140, 0, 50, 50]], // case B ['level 1 item 1', null, [60, 0, 50, 50]], ['level 1 item 2', null, [-60, 60, 50, 50]], ['level 1 item 3', null, [60, 0, 50, 50]], ], ['level 0 item 2', null, [20, 20, 100, 100]], // case D ];
Any item may have unlimited count of sub items. All sub items are defined using same rules as were used for creation of the item itself. See code sample above.
As mentioned above any menu item may have three states: mout, mover and mdown. With Tigra Menu PRO it is possible to define styles for any level in any state of any menu on the page. Caption of any item is printed within two tags basically like this:
<div class="some_class_for_outer_tag"> <div class="some_class_for_inner_tag"> caption text </div> </div>
Styles may be defined for both tags. Usually attributes for item rectangle are assigned to outer tag (i.e. background, border etc.) and attributes for test to inner tag (i.e. font, size, color etc.)
In order to assign styles naming convention should be followed as described below:
.m<menu number>l<level number><state><tag>
where:
Style sheet below may be used to achieve same visual effect as in section above when caption color is changed when state is.
/* Style for outer tag (all states) */
.m0l0mouto,
.m0l0movero,
.m0l0mdowno {
background: white;
border: 1px solid gray;
}
/* Style for inner tag (mout) */
.m0l0mouti {
color: green;
font-family: tahoma, verdana, arial;
font-size: 12px;
margin: 5px;
padding: 0px;
}
/* Style for inner tag (mover) */
.m0l0mouti {
color: orange;
font-family: tahoma, verdana, arial;
font-size: 12px;
margin: 5px;
padding: 0px;
}
/* Style for inner tag (mdown) */
.m0l0mouti {
color: red;
font-family: tahoma, verdana, arial;
font-size: 12px;
margin: 5px;
padding: 0px;
}
You should note that not all browsers render style sheets the same. Always test your configuration with all versions expected.
Any HTML is allowed within items caption (see Building menu tree). This makes Tigra Menu powerful dynamic pages building engine that allows easy creation of professional sites without even worrying about browsers that clients use. With this features you may write cascading pages with pop up forms, images and so forth.
Wrappers are JavaScript function that you may write to ease menu maintenance and to reduce network usage. These functions print html around the text specified before inserting it into menu tree. With wrappers, demo structure from section Building menu tree may look like:
function wrap_grn (text) {
return '<span style="color: green;">' + text + '</span>';
}
function wrap_org (text) {
return '<span style="color: orange;">' + text + '</span>';
}
function wrap_red (text) {
return '<span style="color: red;">' + text + '</span>';
}
var MENU_ITEMS = [
// level 0 item 0
[[ wrap_grn('State is mout'),
wrap_org('State is mover'),
wrap_red('State is mdown')
], "javascript:alert('Click!')"],
// level 0 item 1
['Contact', "mailto:[email protected]"],
];
or even better solution:
function wrap (text, color) {
return '<span style="color: ' + color + ';">' + text + '</span>';
}
var MENU_ITEMS = [
// level 0 item 0
[[ wrap('State is mout', 'green'),
wrap_org('State is mover', 'orange'),
wrap_red('State is mdown', 'red')
], javascript:alert('Click!')],
// level 0 item 1
['Contact', "mailto:[email protected]"],
];
This technique may not pay much on small menu trees or if only few items have html decoration, but it definitely should be used on large menus with rich formatting within items.
Code of the wrappers may be saved together with menu items structure in the same file, keeping clear logical structure of menu configuration.
As you could see it is possible to achieve same visual effects with both styles and inner html. Although styles are easier to manipulate and experiment with, inner html may provide higher browser compatibility level. It is highly desirable to use generic compatible html within items together with wrappers if all potential of Tigra Menu PRO is required no matter what browser version is used.
In order menu to work all required files should be included to HTML document. Then construction called for each menu instance on the page. Constructor for each menu receives two parameters:
Menu initialization block is normally placed before closing tag of the HTML's body:
<script language="JavaScript"> new menu (MENU_ITEMS, MENU_POS); </script> </body> </html>
Case with three menus on the page may look like:
<script language="JavaScript"> new menu (MENU_ITEMS1, MENU_POS1); new menu (MENU_ITEMS2, MENU_POS2); new menu (MENU_ITEMS3, MENU_POS3); </script> </body> </html>
One Tigra Menu PRO script license gives the right to use one copy of the script file (menu.js) within single domain boundaries.
| Demo of Licensing Cases: | ||||||||||||
|
To finalize registration process owner of the script license should provide SoftComplex Inc. with domain name which license is associated with.
Developer license gives the right to include unlimited number of Tigra Menu PRO instances in the products of license owner. Such kind of license is obtained automatically by those who have 9 or more regular licenses.
We offer 50% discount for the script starting from second license. To take advantage of this discount use the link sent with every order confirmation message.
Same discount initially applies to educational and religious organizations.
As owner of the Tigra Menu PRO license You are allowed to configure the script in any possible way for use in Internet (public), Intranet (corporate) or offline application, however You are strictly NOT allowed (unless specifically authorized by SoftComplex.com) to:
You are entitled to free product upgrades and technical support for at least one year from the date of purchase. Technical support includes answers to script related questions via e-mail and/or Internet instant messaging services. Full menu customization services are provided on customer's request at additional charge.
Should you violate these Terms and Conditions or any other rights of SoftComplex Inc., SoftComplex Inc. reserves the right to pursue any and all legal and equitable remedies against you without limitation.