MILONIC DHTML MENU RELEASE 5.0 MENU DESIGN



+----------------+
| Building Menus |
+----------------+

Menus are built by manually editing a plain text file: menu_data.js. A good
quality text editor is an essential tool for this purpose. Notepad will work but
does have issues.

When building your own menus it's always better to use copy and paste. This way,
your syntax errors are reduced and typing is kept to a minimum.

Menu builders are currently being worked on, but in the mean time the only way
to build menus is with a plain text editor.

Once you have your downloaded menu working on your development environment you
can begin editing the menu_data.js file.



+-------------+
| Menu Styles |
+-------------+

The visible properties of menus, such as colors and fonts, etc., are declared
within menu styles. These need to go at the top of your menu definition file, or,
at the very least, be positioned before the first menu that uses the style is
declared.

The object definition for a style is in this format:

with(myMenuStyle=new mm_style()){
PARAMETERS. . . .
PARAMETERS. . . .
}

This will create a style object called myMenuStyle that can be used in as many
menus as required. Parameters are declared within style objects in a 2 pair
format: NAME="PROPERTY". This allows for a very flexible method of property
declaration. There are no rules about the position of properties within the
style object definition, and as long as the property is recognized it will be
used. If the system does not recognize a property it will simply ignore it.

Note: You can declare as many menu styles as you need.

Let's say that we wanted our menu items to have a black background and white
text. In order to do this, we would declare 2 properties within the style object
- offbgcolor="#000000" and offcolor="#FFFFFF".

For the mouseOver colors we would declare onbgcolor="#FFFFFF" and
oncolor="#000000". This would create a black menu with white text, and as each
menu item was moused over would change the color to white background with black
text.

Note: You can use color names, but it isn't compatible with older browsers and
isn't recommended.

With the parameters declared inside our style object definition, it would look
something like this:

with(myMenuStyle=new mm_style()){
onbgcolor="#FFFFFF";
oncolor="#000000";
offbgcolor="#000000";
offcolor="#FFFFFF";
}

Note the addition of semi-colons after each property definition. This is not a
mandatory requirement in JavaScript and is optional, and merely denotes a new
line.

In order to customize the menus style even further, you would add more style
properties to the style object. Here is a list of the available style properties
that you can declare inside a style object:

align
bordercolor
borderstyle
borderwidth
decoration
fontfamily
fontsize
fontstyle
fontweight
headerbgcolor
headercolor
high3dcolor
image
low3dcolor
offbgcolor
offborder
offclass
offcolor
onbgcolor
onbold
onborder
onclass
oncolor
ondecoration
onitalic
onsubimage
outfilter
overfilter
padding
pagebgcolor
pagecolor
pageimage
separatoralign
separatorcolor
separatorheight
separatorpadding
separatorsize
separatorwidth
subimage
subimagepadding
subimageposition

More details about each property can be found here:
http://www.milonic.com/styleproperties.php

Note that each property must be enclosed in quotes unless it is completely
numeric. 10px will need to be "10px", but 10 will be fine without the quotes.



+-------+
| Menus |
+-------+

Now that you have declared your styles you can create some menus.

The Milonic DHTML Menu is NOT a hierarchical menu system, and each menu is
classed as equal. The way the menu works is by setting one or more menus to be
"Always Visible". Your sub menus then fall off this main menu and display as
required.

Normally, your main menu is the first menu that you would declare. Although this
is not a mandatory requirement, it just makes the menu data file easier to
understand when you come back to it in a year or two.

To declare our first menu we have to include the properties inside a Menu object
definition. Here is a menu object definition:

with(milonic=new menuname("mainmenu")){
PARAMETERS. . . .
PARAMETERS. . . .
}

This creates a new menu called "mainmenu". Within this object we will need to
declare a few parameters. One of them is telling the menu to be visible at all
times. The "alwaysvisible" property is used for this purpose. This property is a
logic property, and to enable this property it must be equal to 1. So,
alwaysvisible=1; is what we need.

As this menu will be visible at all times, it will need to be positioned on your
HTML page in the correct place relative to other HTML objects on your page. By
default, all menus are positioned absolute, and, therefore, we will need to give
this menu a TOP and a LEFT position. If we want this menu to be positioned 10
pixels down and 10 pixels across we would use top=10; and left=10;.

Finally, we need to declare the style we want to use for this menu. Style is a
mandatory value that ALL menus must contain. All other properties can be omitted
if need be.

Our new menu object definition should look something like this.

with(milonic=new menuname("mainmenu")){
syle=myMenuStyle;
alwaysvisible=1;
left=10;
top=10;
}

The available properties for use within a menu object definition are:

name
top
left
itemwidth
borderwidth
screenposition
style
alwaysvisible
align
borderstyle
orientation
keepalive
overallwidth
openstyle
openonclick
bordercolor
bgimage
scrollable
margin
overflow
position
overfilter
outfilter
itemheight
followscroll



+------------+
| Menu Items |
+------------+

Now that you have an idea of how to add a menu, you need to know how to add menu
items. After all, a menu will not show anything without menu items, so it's vital
to get a list of menu items inside the menu definition.

Menu items need to be added after the menu properties have been declared. The
order is quite important for menus. The Menu properties first, then menu items.

Menu items are added using a special function embedded within the menu object
definition. The function is aI() (case sensitive), and all menu item parameters
are passed within a text string.

For example, to include a menu item that will take the user back to the home
page, but does not open a sub menu, you would declare a menu item like this:

aI("text=home;url=/index.html");

This is perhaps the simplest of menu items that only has two properties, text
and url. The text property declares the text that will be displayed inside the
menu item, and the url is the page that the user will go to if he or she clicks
on the menu item.

Note: All properties are included inside a single text string, separated by a
semi colon. Properties can also be added in any order. This makes building menus
easier than using conventional array values. With arrays, even if the value is
omitted, you still need to separate the array element with a comma. Plus, they
need to be in the correct order. This is not the case with the Milonic DHTML
Menu. Any order will do, and if a value is not required you just delete it. The
menu will automatically use the default value.

There are instances, however, when you may want to add HTML Entities such as
 . This would normally cause a problem due to the addition of a semi colon.
However, the menu is smart enough to know that   is not the end of the
parameter, and will include it, leaving you with nothing more to do if you need to
add HTML Entities. In addition to this, if you did declare text that was a
little too much for the Menu parser to work out, you could enclose your parameter
inside back quotes. This is useful for including HTML within a menu item for a
form, etc.

aI("text=`<form style=\"prop:val;\"><input name=txt></form>`;");

Is one example of how you would use back quotes.

In order to get the menu item to open a sub menu, you need to declare the name of
the menu that you want associated with the menu item. The showmenu parameter is
used for this. The following sample shows how the Home link could also open a
submenu:

aI("text=home;url=/index.html;showmenu=submenu;");

Again, any order of the above properties is perfectly acceptable, and, as you can
see, to add more properties, you just need to include the value within the aI
text string separated by a semi colon.

The list of properties for menu items is:

text
url
showmenu
status
onbgcolor
oncolor
offbgcolor
offcolor
offborder
separatorcolor
padding
fontsize
fontstyle
fontweight
fontfamily
high3dcolor
low3dcolor
pagecolor
pagebgcolor
headercolor
headerbgcolor
subimagepadding
subimageposition
subimage
onborder
ondecoration
separatorsize
itemheight
image
imageposition
imagealign
overimage
decoration
type
target
align
imageheight
imagewidth
openonclick
closeonclick
keepalive
onfunction
offfunction
onbold
onitalic
bgimage
overbgimage
onsubimage
separatorheight
separatorwidth
separatorpadding
separatoralign
onclass
offclass
itemwidth
pageimage
targetfeatures


The following is a sample menu that includes several menu items.

with(milonic=new menuname("mainmenu")){
style=myMenuStyle;
alwaysvisible=1;
left=10;
top=10;
aI("text=Home;url=/index.html;");
aI("text=About Us;url=/aboutus.html;showmenu=About Us;");
aI("text=Contact Us;url=/contactus.html;showmenu=contact;");
aI("text=Google;url=http://www.google.com/index.html;");
}

In order to build your menu up you could copy and paste the above, making
modifications as required.