VMaxDynoMenu 3 ( NN4+ MIE4+ )
This is sample design featuring VMaxDynoMenu 3 script.
Please, note that not all items of the menu are linked to pages. Some may be linked to non existing pages.
Terms of use
This script is absolutlely free for use if and only if this copyright statement is present in BOTH places: VMaxDynoMenu3
javascript library file (or it's derivative) and page are part of the script
/*******************************************************
* VMax DYNOMENU Lib v3.0 *
* (C)1996-2000 Virtual_Max ( http://come.to/vmax ) *
* This library and it's derivatives are free for use *
* if and only if this notice remains unchanged and *
* present in all copies and derivatives. *
* revision: 03/03/2001 *
*******************************************************/
Mirroring of this page and redistributing of this script or it's documentation
is strictly prohibited. If you want to list this script in the public domain, please,
provide a link to this script's home page instead. Why? The reason is simple, I do not
like the idea that people will download absolete versions from mirrors.
Download
Before downloading, please read the terms of use carefully !
VMaxDynoMenu3.zip
Installation
A complete example can be viewed in the source of this page, here are some
explanations to help you understand the meaning of methods and how this works.
1. You would need to include STYLEs in your HTML. You can put this as in-line styles or LINK as external file. It doesn't
matter. Here are the styles as used in this example:
(this code must be added inside the HEAD section of the document)
<style>
.DYNO { position:absolute;
top:0; left:0; width:1; height:10;
visibility:hidden;
}
.DYNOITEM {
color: #000000;
font-decorations: none;
font-family:Comic Sans MS, arial, sans-serif;
font-size: 12px;
text-decoration: none;
line-height:20px;
}
.DYNO2 {
color: #000000;
font-decorations: none;
font-family:Comic Sans MS, arial, sans-serif;
font-size: 15px;
font-weight: bold;
text-decoration: none;
}
</style>
DYNO and DYNOITEM are required CSS classes used by script internally. DYNO2 is an optional style which is used by an
optional label formatter to apply CSS styles to menu labels.
2. Next to styles include VMaxDynoMenu3.js library in your document
<script language="Javascript1.1" src="VMaxDynoMenu3.js"></script>
3. Define icon images to use with the menu
(This code must be added inside the HEAD section of the document)
<script>
/*******************************************************
* VMax DYNOMENU Lib v3.0 *
* (C)1996-2000 Virtual_Max ( http://come.to/vmax ) *
* This library and it's derivatives are free for use *
* if and only if this notice remains unchanged and *
* present in all copies and derivatives. *
* revision: 03/03/2001 *
*******************************************************/
var target = '_self';
Here the target is the default target frame name for menu links. Next you must define icon sets for use with the menu. Here
is an example of how this is done.
var ifolder = new Iconset( 30,20,
'dynoimages/dynofclosed.gif',
'dynoimages/dynofopened.gif',
'dynoimages/dynofhclosed.gif',
'dynoimages/dynofhopened.gif');
var ifile = new Iconset( 20,20,
'dynoimages/dynofile.gif',
'dynoimages/dynofile.gif',
'dynoimages/dynohfile.gif',
'dynoimages/dynohfile.gif');
First 2 parameters are the width and height of icons (All icons within the same iconset must be the same size.), followed by 4
urls of icon images for different menu item states in the following order: closed, opened, overclosed, overopened.
Then you need to define line icon with it's sizes (if you need lines)
var lineicon = new LineIcon (10,20,'dynoimages/dynoline.gif');
In this example dynoimages/dynoline.gif is a transparent image, with 10 x 20 pixel size
4. Define optional formatter functions. Here is a simple formatter example :
function head_formatter(label){
return '<span class="DYNO2">'+label+'</span>';
}
This option can be used if you want to add a fancy look to items, but are lazy (as I am)
to add
<span class="DYNO2">....'</span> to each menu label.
As each menu Item can use it's own formatter you can define several different formatters,
and then different ones for different items.
5. Define Menu strucrure.
Here is example how this is done on this page.
mymenu = new DynoMenu(null,null,null,null,
new DynoMenu('item 1','test1.html',ifolder,head_formatter,
new DynoMenu('item 1-1','test1-1.html',ifile,null),
new DynoMenu('item 1-2','test1-2.html',ifolder,null,
new DynoMenu('item 1-2-1','test1-2-1.html',ifile,null),
new DynoMenu('item 1-2-2','test1-2-2.html',ifile,null),
new DynoMenu('item 1-2-3','test1-2-3.html',ifile,null)
),
new DynoMenu('item 1-3','test1-2-3.html',ifile,null)
),
new DynoMenu('item 2',null,ifolder,head_formatter,
new DynoMenu('item 2-1',null,ifile,null),
new DynoMenu('item 2-2',null,ifile,null),
new DynoMenu('item 2-3',null,ifile,null)
),
new DynoMenu('item 3',null,ifolder,head_formatter,
new DynoMenu('item 3-1',null,ifile,null),
new DynoMenu('item 3-2',null,ifolder,null,
new DynoMenu('item 3-2-1','test1-2-1.html',ifile,null),
new DynoMenu('item 3-2-2','test1-2-2.html',ifile,null),
new DynoMenu('item 3-2-3','test1-2-3.html',ifile,null)
),
new DynoMenu('item 3-3',null,ifolder,null,
new DynoMenu('item 3-3-1','test1-2-1.html',ifile,null),
new DynoMenu('item 3-3-2','test1-2-2.html',ifile,null),
new DynoMenu('item 3-3-3','test1-2-3.html',ifile,null)
)
),
new DynoMenu('item 4',null,ifolder,head_formatter,
new DynoMenu('item 4-1',null,ifile,null),
new DynoMenu('item 4-2',null,ifile,null),
new DynoMenu('item 4-3',null,ifile,null)
)
)
Constructor has the following parameters :
new DynoMenu(menuLabel,url,iconset,formatter, [ nestedMens ,,,, ] )
menuLabel - Text label for menu
url - or
null, link url
iconset - set of icons to use with this menu item,
one of previously defined new Iconset(..) constructor
formatter - or
null, optional text label formatter function name to call
on this menu item (see above). Note only function name, without () .
So as you can see from the above example, nested structure of the same constructor calls with different parameters, allow to
create tree menu.
Warning: common error, extra comma after last subitem. Be carefull with commas :)
Note, that the root menu has 4 first parameters are null. Root menu constructor serves only as a container for its child, it
isn't visible itself.
6. Creating and initializing menu.
First of all close the </script> tag we opened at p.3
Now add the following inside the BODY of the document
<body bgcolor="#ffffff" text="#000000" onLoad="initMenu(mymenu,10,10);">
<!-- this writes menu divs in document, and create the neccessary HTML code -->
<script>
createMenu('mymenu');
</script>
.....
.....
Note, that createMenu('mymenu') uses the quoted string name of menu root variable object, while initMenu(mymenu,10,10)
uses a variable. Function initMenu also has x,y parameters which allow you to place the menu anywhere on the page with
absolute positioning.
Support
Any bug reports are always welcome.
Unfortunately I can offer only very limited help for free users of this menu. Note that this menu is targeted for serious web
content developers and, of course, I can't teach each and every beginner (who are too lazy to learn HTML and JS
themselves).
Copyright 2001, Virtual_Max (http://come.to/vmax)