VMaxDynoMenu 3 ( NN4+ MIE4+ )
This is sample design featuring VMaxDynoMenu 3 script.
Please, note that not all items of menu linked to pages, and some which is linked
may be linked to unexisting pages.
Terms of use
Script is absolutlely free for use untill this copyright statement
presents in BOTH places: VMaxDynoMenu3 javascript library file (or it's derivative)
and page part of the script
/*******************************************************
* VMax DYNOMENU Lib v3.0 *
* (C)1996-2000 Virtual_Max ( http://come.to/vmax ) *
* This library and it's derivatives is free for use *
* until 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 public domain,
please, provide link to this script home page instead.
Why? Reason is simple, I do not like idea that people will download absolete
versions from your mirrors.
Download
Before downloading, please read terms of use carefully !
VMaxDynoMenu3.zip
Installation
Complete example can be viewed in the source of this page, here is some explanations to help you
understand mening 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, doesn't matter, here is styles as used in this example:
(this code must be added inside HEAD section of 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 internaly.
DYNO2 is optional style which is used by 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 menu
(this code must be added inside HEAD section of document)
<script>
/*******************************************************
* VMax DYNOMENU Lib v3.0 *
* (C)1996-2000 Virtual_Max ( http://come.to/vmax ) *
* This library and it's derivatives is free for use *
* until this notice remains unchanged and present in *
* all copies and derivatives. *
* revision: 03/03/2001 *
*******************************************************/
var target = '_self';
Here target is default target frame name for menu links.
Next you must define icon sets for use with menu.
Here is example how this is done in this example
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 width and height of icons
(All icons within the same iconset must have the same sizes.),
followed by 4 urls of icon images for different menu item states in the following order:
closed, opened, overclosed, overopened.
Than 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 transparent image, with 10 x 20 pixel size
4. Define optional formatter functions, here is simple formatter example :
function head_formatter(label){
return '<span class="DYNO2">'+label+'</span>';
}
This option can be used if you want to add 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 than 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 have 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 defined previously 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 above example, nested structure of the same constructor calls
with different parameters, allow to create tree menue.
Warning: common error, extra comma after last subitem. Be carefull with commas :)
Note, that root menu have 4 first parameters nulls. Root menue constructor serves
only as container for it's childs, it isn't visible itself.
6. Creating and initializing menu.
First of all close </script> tag we opened at p.3
Now add the following inside BODY of the document
<body bgcolor="#ffffff" text="#000000" onLoad="initMenu(mymenu,10,10);">
<!-- this writes menu divs in document, and create neccessary HTML code -->
<script>
createMenu('mymenu');
</script>
.....
.....
Note, that createMenu('mymenu') use quoted string name of menu root variable object,
while initMenu(mymenu,10,10) use variable. Function initMenu have also x,y parameters
which allow you to place 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 to serious web content developers and, of course,
I can't teach each beginner (who are lazy to learn HTML and JS themselves).
Copyright 2001, Virtual_Max (http://come.to/vmax)