|
EXAMPLE
1) Download
this ZIP file with the ypSlideOutMenus.js script file and the rollover
images, and unzip into
the appropriate directory.
2) Insert these scripts with the <STYLE> tag in the <HEAD> section of the
page (or place the style tags in a CSS stylesheet and place the call to the
stylesheet instead).
3) Insert the following HTML code anywhere in the <BODY> section of the page.
4) Insert the following HTML code also in the <BODY> section where you
want the rollover buttons to appear in the page.
5) Insert the onLoad event handler inside the <BODY> tag
as follows:
<body onload="preloadImages('/menu_script/button1_on.gif','/menu_script/button2_on.gif','/menu_script/button3_on.gif',
'/menu_script/button4_on.gif','/menu_script/button5_on.gif')", followed by other tags such as bgcolor, etc..
6) Define the rollover buttons and assign them the appropriate menu in
this section of the HTML code:
<A onmouseover="swapImage('Button1','','menu_script/button1_on.gif',1);ypSlideOutMenu.showMenu('menu1');"
onmouseout="swapImgRestore();ypSlideOutMenu.hideMenu('menu1');" href="http://simplythebest.net">
<IMG height=22 src="menu_script/button1.gif" width=150 border=0
name=Button1></A><BR>
<A onmouseover="swapImage('Button2','','menu_script/button2_on.gif',1);ypSlideOutMenu.showMenu('menu2');" onmouseout="swapImgRestore();ypSlideOutMenu.hideMenu('menu2');" href="http://planmagic.com">
<IMG height=22 src="menu_script/button2.gif" width=150 border=0 name=Button2></A><BR>
and so forth...
7) Define the direction of the menus, their positioning and their DIV
size in this section of the
script:
<SCRIPT language=javascript>
<!--
var yPosition = 251; // this is the default top position of
the first menu
//new ypSlideOutMenu("number menu", "slide position", left, top, width, height)
new ypSlideOutMenu("menu1", "right", 265,
yPosition, 146, 230) // direction of menu, left position, top position,
followed by width, height of animation DIV.
new ypSlideOutMenu("menu11", "right", 408,
yPosition + 81, 146, 160) // '+ 81' is
added to the default top position 'yPosition = 251'
new ypSlideOutMenu("menu12", "right", 408, yPosition + 181, 146, 160)
new ypSlideOutMenu("menu2", "right", 265, yPosition + 22, 146, 130)
new ypSlideOutMenu("menu21", "right", 408, yPosition + 63, 146, 80)
new ypSlideOutMenu("menu3", "right", 265, yPosition + 44, 146, 100)
new ypSlideOutMenu("menu4", "right", 265, yPosition + 66, 146, 100)
//-->
</SCRIPT>
The width and height of a menu is defined by its table and/or cell
properties.
8) Define the style of the links and the menus in this section of the style
tag:
<STYLE type=text/css>
.rollmenu { border-right: #254869 1px solid; padding-right:
2px; border-top: #8eaac7 1px solid; display: block; padding-left:
2px; font-size: 11px; padding-bottom: 2px; border-left: #5f87af
1px solid; color: #eee; line-height: normal; padding-top: 2px; border-bottom:
#19324c 1px solid; font-family: "Arial", "Helvetica",
"sans-serif"; background-color: #298ca5; text-decoration: none}
.rollmenu:hover { background-color: #4ab5d6; text-decoration: none}
.menuhead { font-weight: bold; font-size: 12px; color: #ffffff; background-color:
transparent}
#menu1 { left: 1px; visibility: hidden; position: absolute; top:
1px; background-color: transparent}
and so forth...
9) Customize the content of the menus in
this section of the HTML code:
<!-- Begin SubMenu1 -->
<DIV id=menu1Container>
<DIV id=menu1Content>
<TABLE cellSpacing=0 cellPadding=0 width=142 border=0> //
the menu width
<TBODY>
<TR>
<TD onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')"
vAlign=center align=left width=142 height=17>
<A class=rollmenu href="http://simplythebest.net"> <SPAN
class=menuhead>Directories</SPAN></A></TD></TR>
<TR>
<TD onmouseover="ypSlideOutMenu.showMenu('menu1')" onmouseout="ypSlideOutMenu.hideMenu('menu1')"
vAlign=center align=left width=142 height=17>
<A class=rollmenu href="cgi_scripts/cgi_scripts.html">CGI scripts</A></TD></TR>
<TR>
<TD onmouseover="ypSlideOutMenu.showMenu('menu1');ypSlideOutMenu.showMenu('menu11')"
onmouseout="ypSlideOutMenu.hideMenu('menu1');ypSlideOutMenu.hideMenu('menu11')"
vAlign=center align=left width=142 height=17>
<A class=rollmenu href="scripts/dhtml_scripts.html">DHTML scripts</A>
</TD>
</TR>
</TBODY>
</TABLE>
</DIV></DIV>
<!-- End SubMenu1 -->
<!-- Begin SubMenu11 -->
<DIV id=menu11Container>
<DIV id=menu11Content>
<TABLE cellSpacing=0 cellPadding=0 width=106 border=0>
//
the menu width
<TBODY>
<TR>
<TD onmouseover="ypSlideOutMenu.showMenu('menu1');ypSlideOutMenu.showMenu('menu11')"
onmouseout="ypSlideOutMenu.hideMenu('menu1');ypSlideOutMenu.hideMenu('menu11')"
vAlign=center align=left width=106 height=17>
<A class=rollmenu href="scripts/dhtml_menu_scripts.html">Menu scripts</A>
</TD>
</TR>
<!-- End SubMenu11 -->
<!-- Begin SubMenu2 -->
<DIV id=menu2Container>
<DIV id=menu2Content>
and so forth...
10) Adjust the speed of the menus and the delay time in this
section of the ypSlideOutMenus.js file:
ypSlideOutMenu.aniLen = 650 // speed of
the menus, the higher the value the slower the animation
ypSlideOutMenu.hideDelay = 325 // delay time before the menus
close
11) Define the path to the script file in the script tag in the <HEAD>
section:
<SCRIPT language=javascript src="menu_script/ypSlideOutMenus.js"></SCRIPT>
Have a look at dhtml
script 114
to see how this script can also be used.
For more
information you can visit the author's
web site.
|
