|
EXAMPLE
1) Download
this ZIP file with the ypSlideOutMenus.js script file 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 links to appear in the page.
5) Define the direction of the menus, their positioning and their DIV
size in this section of the
script:
<SCRIPT language=javascript>
new ypSlideOutMenu("menu1", "up", 280, 302,
300, 800) // direction of menu, left position, top position,
followed by width, height of animation DIV.
new ypSlideOutMenu("menu2", "left", 280, 335,
300, 800)
new ypSlideOutMenu("menu3", "right", 0, 365,
300, 800)
new ypSlideOutMenu("menu4", "down", 280, 140,
300, 800)
</SCRIPT>
The width and height of a menu is defined by its table and/or cell
properties.
6) Define the style of the links and the menus in this section of the style
tag:
<STYLE type=text/css>
.menuTable { font-family: arial, helvetica, sans-serif;
font-size:
10pt}
.menuLink { font-size: 8pt; font-family: verdana, helvetica,
sans-serif; color: #006666; text-decoration: none }
.menuLink:hover { color: #006699; text-decoration: underline }
.menuInsert { z-index: 200; font-style: normal; font-variant: normal; font-weight:
normal;
line-height: 10pt; font-size: 9pt; font-family: verdana, helvetica,
sans-serif;
width: 140px; color: #888888; height: 80px; background-color:
white;
border: 1px solid #dddddd; margin: 0px;
padding-left: 10px; padding-right: 10px; padding-top:
10px; padding-bottom: 15px }
7) Customize the content of the menus in
this section of the HTML code:
<!-- Begin SubMenu1 -->
<DIV id=menu1Container class=menuContainer>
<DIV id=menu1Content class=menu>
<DIV class=menuInsert style="height: 180px"> // Define
the menu height for the Netscape browser here
<TABLE class=menuTable cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="COLOR: #000000">Directories:</TD></TR>
<TR>
<TD><IMG height=4 src="menu_script/spacer.gif" width=1></TD></TD>
<TR>
<TD><A class=menuLink href="cgi_scripts/cgi_scripts.html">CGI scripts</A></TD></TD>
<TR>
<TD><IMG height=4 src="menu_script/spacer.gif" width=1></TD></TR>
<TR>
<TD><A class=menuLink href="scripts/dhtml_scripts.html">DHTML scripts</A></TD></TD>
</TR>
</TBODY>
</TABLE>
</DIV></DIV></DIV>
<!-- End SubMenu1 -->
<!-- Begin SubMenu2 -->
<DIV id=menu2Container class=menuContainer>
<DIV id=menu2Content class=menu>
and so forth...
8) Adjust the speed of the menus and the delay time in this
section of the ypSlideOutMenus.js file:
ypSlideOutMenu.aniLen = 250 // speed of
the menus, the higher the value the slower the animation
ypSlideOutMenu.hideDelay = 1000 // delay time before the menus
close
9) 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 114a
to see how this script can be used as a vertical popup menu script.
For more
information you can visit the author's
web site.
|
