Place your mouse on the word "HOT"
Features
Hide tonns of links in tiny menu.
Unlimited number of submenu levels
Custom images combined with text titles
4 state menu items
Highlight on mouse over
Flexible targeting for use in framesets
Java Scripting support
External table style menu structure definition file
Easy way to maintain links
Links for both: folders and items
Menu up-down drag capability
Applet Tag Example
<APPLET CODE="hotmenu.class" CODEBASE="."
WIDTH=160 HEIGHT=400
MAYSCRIPT
>
<PARAM NAME="AUTHOR"
VALUE="Virtual_Max ( http://come.to/vmax)">
<PARAM NAME="BGCOLOR" VALUE="ffffff">
<PARAM NAME="TEXTCOLOR" VALUE="000000">
<PARAM NAME="ACTIVECOLOR" VALUE="ff0000">
<PARAM NAME="FONT" VALUE="Helvetica, 1 ,14">
<PARAM NAME="KEY" VALUE="Free Version">
<PARAM NAME="URL" VALUE="hotmenu.txt">
<PARAM NAME="STEP" VALUE="4">
<PARAM NAME="DELAY" VALUE="50">
<PARAM NAME="ONMOUSEOVERDELAY" VALUE="300">
<PARAM NAME="LEVELXOFFSET" VALUE="25">
<PARAM NAME="AUTOOPEN" VALUE="0">
<PARAM NAME="AUTOCLOSE" VALUE="false">
</APPLET>
Cut'n'paste above example to your HTML source file with the help of any
TEXT editor like Notepad. One probably would like to customize size, colors
and font settings. All you can change shown in bold in above example, do
not change anything else. Params shown in GRAY color
are
optional.
Parameters
All colors are in hexadecimal format, same as HTML colors are, but without
# symbol. If you are not sure what hexadecimal colors are, please, use
color picker from HotButton Applet Wizard page to get the color from table
and copy color code from text field.
BGCOLOR applet background color.
TEXTCOLOR menu items text color in passive
state.
ACTIVECOLOR menu items text color
in highlighted state on mouse over item.
FONT settings include Font Name ("TimesRoman","Helvetica","Courier"
or "Dialog")
Font Style (0-plain, 1-bold ,2-italics, 3-bold italics) and font size
in pixels.
KEY registered users should replace the
value of this field with actual KEY number for THIS applet. KEY includes
encrypted appletname and URL, so it is unigue for each combination of applet
and URL.
AUTOCLOSE if true applet will close menu on mouse exit, it omited
or false applet will open menu on last clicked item on mouse exit, or close
menu if no item was clicked.
AUTOOPEN contains number of menu item to be shown as opened
one on applet start up. This is optional parameter, if omited or if it's
value="-1" than menu will be remains closed.
until user moves mouse over it.
LEXELXOFFSET please, read details of text positioning
STEP, DELAY and MOUSEOVERDELAY are optional parameters to control
applet timing and animation. Step is single frame step in pixels for menu
sliding control, DELAY is time in milliseconds per animation frame, MOUSEOVERDELAY
is delay time in milliseconds after last mouse move before begining of
folder opening or closing.
If you don't like that menu live with it's own life you can set ONMOUSEOVERDELAY
parameter to 300000 (5 minutes) or more (any other number of milliseconds
but not more than 2,000,000,000) In this case folders will be opened when
user will click on it.
Menu File
Menu structure defined in separate text file, default name for this file
is hotmenu.txt, but one can redefine the default URL for the menu
file with the help of optional parameter:
<PARAM NAME="URL" VALUE="./YourMenuFile.txt">
Menu Structure
Menu text file contains simple table style structure. | symbol used as
table fields separator. Each line of file starts with > symbol, the number
of spaces before this symbol corresponds to the menu depth level, this
symbol followed by optional menu item name (text string) . Line which don't
starts with > character ignored by applet and can be used for comments.
Note that top level item always should have > character at first position
in the string, and the second level item should have it on second position
and so on. Note also that LevelN can't be followed by LevelN+2, in this
case there will be no folder to open at LevelN+1 to show items in LevelN+2.
Level depth is unlimited, but I hardly can imagine one would use more
than 4-5 levels depth.
level&text link URL target icon_for_closed icon_for_opened for_overclosed for_overopened textX textY
--------------------------------------------------------------------------------------------------------------------------
> | | |./hmtop.gif | | | | |
>Folder1 | | main |./hm1folder.gif |./hm1foldero.gif|./hm1folderh.gif|./hm1folderoh.gif| 27 |
>SubMenu1| | main |./hm2folder.gif |./hm2foldero.gif|./hm2folderh.gif|./hm2folderoh.gif| 50 |
>Item1 |page1.htm| main |./hm3file.gif | |./hm3fileh.gif | | 73 |
>Item2 |page2.htm| main |./hm3file.gif | |./hm3fileh.gif | | 73 |
>SubMenu2| | main |./hm2folder.gif |./hm2foldero.gif|./hm2folderh.gif|./hm2folderoh.gif| 50 |
>Item1 |page1.htm| main |./hm3file.gif | |./hm3fileh.gif | | 73 |
>Item2 |page2.htm| main |./hm3file.gif | |./hm3fileh.gif | | 73 |
>JavaScript|Javascript:javascriptdemo()| |./hm2file.gif | |./hm2fileh.gif | | 50 |
>Folder2 | | main |./hm1folder.gif |./hm1foldero.gif|./hm1folderh.gif|./hm1folderoh.gif| 27 |
.... more lines here .....
...and finally last line..
> | | |./hmbot.gif | | | | |
Level&Text filed in table followed by Link URL field. This
can be any valid URL for file to be opened when user click on the item.
Both menu folders and menu items can have linked documents. In case you
don't need the document to be opened this field can be left blank.
JavaScript support is one more exciting capability of the applet.
If URL starts with "JavaScript:" than the following statement
will be evaluted in context of current window(frame) as JavaScript statement.
Target field in this case wouldn't mean anything, and can be left blank.
Note:
Not all browsers allow applets to use scripts, this option can cause problems
with visitors who still use archaic ones. This option will work in NN3+
and MIE4+(with has allowed applet scripting option in preferences)
Target field can be used with frameset. The meaning of this
field is the same as TARGET attribute in particular <A HREF="some.html"
TARGET="windowname">. The frameset used in this page
<FRAMESET COLS="180,*" >
<FRAME NAME="nav" SRC="hotmenunav.html" scrolling=no>
<FRAME NAME="main" SRC="hotmenumain.html">
</FRAMESET>
defines two frames with names nav and main, so main used
in above menu definition .txt file as a target frame name. One can also
use predefined frame names _top, _parent, _blank and
_self
Icons
There 4 fields with image names for each item. This 4 icons are used for
different states of item.
In table below one can find all images used in this example
|
Passive closed state |
Passive opened state |
Highlighted closed |
Highlighted opened |
Level_0
top |
 |
|
|
|
Level_1
folder |
hm1folder.gif |
hm1foldero.gif |
hm1folderh.gif |
hm1folderoh.gif |
Level_1
document |
hm1file.gif |
|
hm1fileh.gif |
|
Level_2
folder |
hm2folder.gif |
hm2foldero.gif |
hm2folderh.gif |
hm2folderoh.gif |
Level_2
document |
hm2file.gif |
|
hm2fileh.gif |
|
Level_3
document |
hm3file.gif |
|
hm3fileh.gif |
|
Level_0
bottom |
hmbot.gif |
|
|
|
If names for icons left blank the inheritance from left to right used,
so if you left blank name for folder opened state, than icon for folder
closed state will be used for this state too.
 |
This is template image designed for this Menu.
This template includes all images for all states and all levels of menu
items. Later this image was cut into pieces which was saved separatly.
Of course, one can design his own images for this applet, but there
are some limitations. Java correctly recognize only GIF NON-INTERLACED
images.
Supposed to recognize JPG too, but some browsers actually screws up on
some subsets of JPGs. Applet itself designed for use of NON-TRANSPARENT
images only. All images should have the same width and this width
should match exactly the width defined in applet tag. All images used
for one item should have the same height, image sets used for different
items can have the different height. |
Text Positioning
Last two fields in menu definition .txt file is absolute text positioning
in pixels relative to top left corner of icon. Those fields are optional
and can be left blank. in this case text will be vertically centered, x
coordinate will be calculated dX*LevelNumber, i.e. each next level text
will be shifted right dX pixels. Default value of dX = 10, i.e. level 0
text will be positioned at x=10, level 1 will be positioned at x=20, and
so on.
Default value of level x offset can be redefined with optional parameter
<PARAM NAME="LEVELXOFFSET" VALUE="25">
Controlling from JavaScript
Yes, you can call one of two public methods from JavaScript, for
example if user clicks on some link in main page you would like to indicate
changing of page location also in menu
showFolder("foldernumber")
showFolderMatchingURL("urlstring");
But before you would try to use these methods, you need to check that
other frame exists, that it have applet in it and that applet is
loaded successfully. This will help to avoid nasty error JavaScript messages,
you need to do something like this:
<script>
function checkApplet()
{if(parent)
if(parent.nav)
if(parent.nav.document)
if(parent.nav.document.HOTMENU)
{a=parent.nav.document.HOTMENU;
if(a!=null)
{if(a.ready)
{return a;}
}
}
return null;
}
function setState(n)
{applet=checkApplet()
if(applet!=null) applet.showFolder(n)
}
function setURL(url)
{applet=checkApplet()
if(applet!=null) applet.showFolderMatchingURL(""+url);
}
</script>
<form onSubmit="setState(this.elements[0].value) ;return false">
<input type=text size=5><input type=Submit value="Change
Menu State">
</form>
showFolder("foldernumber") expects string
containing integer number of menuitem
One can try to enter any number in above text field to set menu opened
on desired item.
If you would enter -1 this will close folder, in case you will enter
too big number nothing will happens.
showFolderMatchingURL("urlstring") one expects
string representation of URL. Applet will try to find item with URL matching
to this url and show this item as opened.
One can try to click on links above to test this in action
Features
Parameters
Highlight Color
If no matching link found than nothing will happens.
All above links are looks like this one:
<A HREF="some.html" onClick='setURL(this)'>LinkText</a>
Both methods DON'T open page! It only changes the state of applet.
In above links example link is followed as from 'normal' link click.
Your JavaScript must take care about synchronization of content and menu
state.