|
EXAMPLE
Click on the arrow image to expand
or minimize a menu window.
1) Insert these scripts with the style command in the <HEAD> section of the page.
2) Download
this ZIP file with
the menu.js script file and unzip into the appropriate directory.
3) Insert the following HTML code inside
the <BODY> section where you want the menu windows to appear in your page.
4) Define the style of the menu windows in this section of the <STYLE> command:
<style type="text/css">
<!--
#header1 {background-color:#0F5890; color:#FFFFFF} //
background color of header and header color
#backgr1 {background-color:#FFFFFF} //
background color of the menu window
TD.cell1 {border:1 solid #0F5890} //
border size and color of the menu window
#header2 {background-color:#006600; color:#FFFFFF}
#backgr2 {background-color:#FFFFFF}
TD.cell2 {border:1 solid #006600}
TH {font-family:Tahoma,Arial; font-size:10pt; font-weight:bold;
text-align:left} // font style and
alignment of the headers
//-->
</style>
5) Define the menu windows and the content
in this section of the HTML code:
<table border="0" width="200" cellspacing="0"
cellpadding="2">
<tr><th id="header1"><a target=_self href="javascript:STB('C01')">
<img src="dropdown/arrow.gif" border="0" align="absmiddle"></a>
SimplytheBest.net</th></tr>
<script>SetC("C01");</script>
<td id="backgr1" class="cell1"><div><font face="Verdana"
size="1">
<a href="scripts/dhtml_scripts.html">DHTML scripts</a><br>
<a href="cgi_scripts/cgi_scripts.html">CGI scripts</a><br>
</font></div></td></table></td>
<table border="0" width="200" cellspacing="0" cellpadding="2">
<tr><th id="header2"><a target="_self" href="javascript:STB('C02')">
<img src="dropdown/arrow.gif"
border="0" align="absmiddle"></a>
DHTML Scripts</th></tr>
<script>SetC("C02");</script>
<td id="backgr2" class="cell2"><div><font
face="Verdana" size="1">
<a href="scripts/dhtml_animation.html">Animation scripts</a><br>
<a href="scripts/dhtml_menus.html">DHTML menu scripts</a><br>
</font></div></td></table>
To add more menus copy and paste existing menu elements and edit them to suit.
For example, to add a fifth header with
dropdown menu:
a) add this set of variables in the style command:
#header5 {background-color:#006600; color:#FFFFFF}
#backgr5 {background-color:#FFFFFF}
TD.cell5 {border:1 solid #006600}
b) add a 5th table and edit the variables in
the HTML code:
<table border="0" width="200" cellspacing="0" cellpadding="2">
<tr><th id="header5"><a target="_self" href="javascript:STB('C05')">
<img src="dropdown/arrow.gif" border="0" align="absmiddle"></a>
Javascripts</th></tr>
<script>SetC("C05");</script>
<td id="backgr5" class="cell5"><div><font
face="Verdana" size="1">
<a href="javascripts/javascripts.html">Javascripts</a><br>
</font></div></td></table>
6) Define the path of the .js file (relative to the page) in the call
to the script which is located in the <HEAD> section:
<script src="dropdown/menu.js"></script>
We offer a version of this script with the menus in a closed
state rather than the initial open state. This modification can be purchased
using Paypal via this link.
|
