|
EXAMPLE
Position your cursor on "MENU"
on the left to make the menu slide-in.
1) Insert this code in the <HEAD> section of the page.
2) Download
this ZIP file with the ssmItems.js
and ssm.js and unzip into the appropriate directory.
3) In the <STYLE> section define the
font color of the links in the menu:
<STYLE><!--
A.ssmItems:link {color:black;text-decoration:none;}
A.ssmItems:hover {color:black;text-decoration:none;}
A.ssmItems:active {color:black;text-decoration:none;}
A.ssmItems:visited {color:black;text-decoration:none;}
//-->
</STYLE>
4) Change the variables for the menu in this
section of the ssmItems.js file:
// Positioning and speed
YOffset=80; // set how far from the top the menu should
be
staticYOffset=20; // set the position
of menu from the top for the static menu
slideSpeed=20
//
set the speed for the moving out and moving back
of the menu
waitTime=200; // this sets the time the menu stays out for after the mouse goes off it.
// For the menu table
menuBGColor="black";
menuIsStatic="yes"; // set to no if you want the menu statically
positioned on the page
menuWidth=140; // must be a multiple of 10!
// For the menu headers and horizontal bars
hdrFontFamily="arial, sans serif";
hdrFontSize="2";
hdrFontColor="#FFFFFF";
hdrBGColor="gray";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="20";
// For the links
linkFontFamily="Verdana";
linkFontSize="1";
linkBGColor="#FFFFF0";
linkOverBGColor="#D7EBFF";
linkTarget="_top";
linkAlign="Left";
// For the vertical menu bar
barBGColor="#FF4400";
barFontFamily="arial, sans serif";
barFontSize="2";
barFontColor="#FFFFFF";
barVAlign="center";
barWidth=15;
// no quotes!!
// Define
the links in the menu:
startMenu("Menu", "M E N U")
addItem("Home page", "http://simplythebest.net", "");
addItem("Shareware directory", "http://simplythebest.net/software/", "");
addItem("Information library", "http://info.simplythebest.net", "");
addHdr("DHTML Scripts");
addItem("Animation", "dhtml_animation.html", "");
addItem("Buttons", "dhtml_buttons.html", "");
addItem("Menu scripts", "dhtml_menu_scripts.html", "");
Also don't forget to define
the path to the two script files in the <HEAD> section:
<SCRIPT SRC="menu_files/ssm.js" language="JavaScript1.2"></SCRIPT>
<SCRIPT SRC="menu_files/ssmItems.js" language="JavaScript1.2"></SCRIPT>
Have fun putting this script to work on your site. If you would like more
information, you can visit the author's
web site.
|
