|
EXAMPLES
1) Download
this ZIP file with the 6 HTML sample pages and the related script
files, and unzip into the appropriate directory. The ZIP
file also contains the images used in these examples to help you configure the
script.
2) Open the sample HTML page you intend to use with an editor (text or
HTML) and
copy the code into the <HEAD> section of your page.
Example:
<HTML>
<HEAD>
<TITLE>My page</TITLE>
<!-- Author: Michael Falatine 4thorder@4thorder.us -
http://www.4thorder.us/Scripts/ -->
<script type="text/javascript" language="JavaScript" src="menu_script/DHTMLMenuExpanderV2.js"></script>
<script type="text/javascript" language="JavaScript" src="menu_script/sample1.js"></script>
<LINK rel="stylesheet" type="text/css" href="menu_script/vertical.css">
</HEAD>
Note: change the path to the script files if different from the default (\menu_script).
3) Copy the HTML code inside <!-- Menu start --> <!-- Menu end -->
anywhere in the <BODY> section. Edit the structure and the links as is needed.
<!-- Menu start -->
<DIV id="menuSystem">
<TABLE id="mainTable">
<TR><TD>
<TABLE>
<TR><TH>PlanMagic</TH></TR>
<TR><TD><A href="http://planmagic.com" target="_blank">Home page</A></TD></TR>
<TR><TD><A href="http://planmagic.com/company.html">About us</A></TD></TR>
// Place as many links as you like
</TABLE>
</TD></TR>
// Place as many sections as you like
<TR><TD>
// Example header without dropdown menu
<TABLE>
<TR>
<TH width="110"><A href="http://biz.planmagic.com/">Business news</A></TH>
</TR>
</TABLE>
</TD></TR>
</TABLE>
</DIV>
<!-- Menu end --> 4) Open the related sample .js file
and edit the settings if needed. Read instructions in the file.
5) Open the related CSS file (horizontal.css or vertical.css) and
change the positioning of the menu and the style as is needed.
6) Open the DHTMLMenuExpanderV2.js file and change
the path to the images used in the menu if different from the default.
Search '\menu_script' (the default
folder) and replace all image folder instances with your own folder throughout the file:
var str='<IMG border="0" src="menu_script\/'+imagePLUS+'"
alt="Expand ALL"> ';
THCol.item(0).insertAdjacentHTML("afterBegin", str);
and so forth...
For more
information you can visit the
author's
web site.
|
