|
EXAMPLE
1) Insert these scripts in the <BODY> section of the page.
2) Download
this ZIP file with the menu_array.js and the mmenu.js
files and unzip them into the appropriate directory. The ZIP includes the images
in the menu to help you with the script.
3) Modify or add parameters to customize
the style and the content of your menu in the menu_array.js file:
// Special effect string for IE5.5 or above. Click
here for more filters.
if(navigator.appVersion.indexOf("MSIE 6.0")>0)
{
effect = "Fade(duration=0.2);Alpha(style=0,opacity=88);Shadow(color='#777777',
Direction=135, Strength=5)"
}
else
{
effect = "Shadow(color='#777777', Direction=135, Strength=5)"
}
timegap=500 // The time delay for menus to remain visible
followspeed=5 // Follow scrolling speed
followrate=40 // Follow
scrolling rate
suboffset_top=10; // Sub menu offset
Top position
suboffset_left=10; // Sub menu offset Left position
style1=[ // style1 is an array of properties. You can have as many property arrays as you need. This means that menus can have their own style.
"navy", // Mouse
off font color
"ccccff", // Mouse off
background color
"ffebdc", // Mouse on
font color
"4b0082", // Mouse
on background color
"000000", // Menu
border color
12, // Font size in pixels
"normal", // Font
style (italic or normal)
"normal", // Font
weight (bold or normal)
"Verdana, Arial", // Font
name
4, // Menu item
padding
"dropdown/arrow.gif", // Sub
menu image and its location (leave this blank if not needed)
5, // 3D border &
separator bar
"66ffff", // 3D
high color
"000099", // 3D
low color
"Purple", // Current
page item font color (leave this blank to disable)
"pink", // Current
page item background color (leave this blank to disable)
"dropdown/arrowdn.gif", // Top
bar image (leave this blank to disable)
"ffffff", // Menu
header font color (leave blank if headers are not needed)
"000099", // Menu
header background color (leave blank if headers are not needed)
]
20, // The top position of the menu in pixels
200, // The left position of the menu in pixels
, // The menus width in pixels (or leave
blank and define the menu width in each addmenu
array)
1, // Menu border
width
, // Screen position - here you can use "center;left;right;middle;top;bottom" or a combination of
"center:middle", "top:right", and so forth.
style1, // Properties
array - this is set higher up, as above
1, // Allows the menu item to be visible at all time (1=on/0=off)
"left", //
Sets the menu elements text alignment, values valid here are: left, right or center
effect, // Filter - text variable for setting transitional effects on menu activation - see above for more info
0, // Follow
scrolling - tells the menu item to follow the user down the screen (visible at all times) (1=on/0=off)
1, // Horizontal
menu - tells the menu to become horizontal instead of top to bottom style (1=on/0=off)
0, // Keep alive -
keeps the menu visible until the user moves over another menu or clicks elsewhere on the page (1=on/0=off)
left, // Position of TOP sub image left:center:right
, // Set the overall width of
horizontal menu to 100% and height to the specified amount (leave blank to disable)
0, // Right To Left -
used in Hebrew for example. (1=on/0=off)
0, // Open the
menus OnClick - leave blank for OnMouseover (1=on/0=off)
, // ID of the div you want to hide on MouseOver (useful for hiding form elements)
Define the menu headers: "Description
text", "URL", "Alternate URL", "Status", "Separator bar"
,"SimplytheBest.net","http://simplythebest.net",,"Back to the home
page",1
,"Directories ","show-menu=directories",,"",1
,"Network ","show-menu=network",,"",1
,"PlanMagic ","show-menu=downloads",,"",1
,"Search ","show-menu=search",,"",1
,"Other ","show-menu=other",,"",1
])
For the menu dropdowns:
addmenu(menu=["directories",
,,185,1,"",style1,,"left",effect,,,,,,,,,,,,
// "Sub menu width", "Border
width", "Style array", "Text alignment"
,"Shareware & Freeware","show-menu=shareware",,,1
,"DHTML scripts","show-menu=dhtml",,,1
])
addmenu(menu=["shareware",
,,170,1,"",style1,,"left",effect,,,,,,,,,,,,
,"Business","business.html",,,0
,"Graphics","graphics.html",,,0
,"Programming","programming.html",,,0
,"Utilities","utilities.html",,,0
,"Internet tools","web_utilities.html",,,0
])
addmenu(menu=["dhtml",
,,170,1,"",style1,,"left",effect,,,,,,,,,,,,
,"Animation","dhtml_animation.html",,,0
,"Buttons","dhtml_buttons.html",,,0
,"Menus","dhtml_menu_scripts.html",,,0
])
To add more menus simply copy and paste other menu elements and edit them to suit.
To open a page in another frame add "target=your_frame" to the link text, for example:
"Your Text", "your_link.htm target=your_frame",,,
You can also use _blank, _new and _self etc. as target.
To position your menu anywhere on the screen set the Top & Left values and remove any reference for "Screen Position".
Offsets can be applied to both Top & Left positions, for example:
addmenu(menu=[
"mainmenu", // Menu name
20, // Menu top
"offset=-200", // Menu left
, // Menu width
1, // Menu border width
"center", // Screen position
style1, // Properties array
1, // Always visible
"left", // Alignment
The above will position the menu in the center of
the screen minus 200 pixels.
6) Define the path to the js files in the <BODY> section:
<SCRIPT language=JavaScript
src="dropdown/menu_array.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="dropdown/mmenu.js"
type=text/javascript></SCRIPT>
For more information on this
script, visit Milonic Solutions'
web site.
|
