|
EXAMPLE
| Button1 |
|
|
| Button2 |
|
|
| Button3 |
|
|
| Button4 |
|
|
|
|
1) Insert the following style command in
the <HEAD> section of the page.
2) Insert this script in the <HEAD>,
between <HEAD> and <BODY> or in the <BODY> section of the page.
3) Insert this HTML code in the
<BODY> section where you want the dropdown menu to appear in the page.
Modify the script to your needs:
In the style section define
the font-family, size and color of the headings and the links in the dropdown
menu:
<style>
<!--
a.nav:link { font-family: Verdana,Arial; font-size: 10px; text-decoration: none }
a.nav:visited { font-family: Verdana,Arial; font-size: 10px; text-decoration: none }
a.nav:active { font-family: Verdana,Arial; font-size: 10px; text-decoration: none }
a.nav:hover { font-family: Verdana,Arial; font-size: 10px; text-decoration: none; color:
#FF0000 }
.HEADING { cursor: hand; font-family: Verdana,Arial; font-size:
12px; color: #FFFFFF;
background-color: #0000FF; font-weight: none;
border: 1 solid #000000 }
.LINKSOFF { display: none; font-family: Verdana,Arial; font-size:
12px; color: #000080 }
.LINKSON { display: inline; font-family: Verdana,Arial; font-size:
12px; color: #000080 }
-->
</style>
In the HTML code section, define the background color of the tables, the links and other variables:
<td ID="head0" align="center" width="113" height="15" class="HEADING"
ONCLICK="ShowHide(0)">Button1</td>
</tr>
<tr>
<td ALIGN="left" bgcolor="#FFFFCC">
<!-- Menu 1 -->
<div ID="Link0" class="LINKSOFF">
<a class="nav" href="http://simplythebestscripts.com"><b>Script library</b></a><br>
<a class="nav" href="http://simplythebestscripts.com/dhtml/">DHTML scripts</a><br>
<a class="nav" href="http://simplythebestscripts.com/javascripts/">JavaScripts</a><br>
<a class="nav" href="http://simplythebestscripts.com/vbscripts/">VBscripts</a><br>
<a class="nav" href="http://simplythebestscripts.com/cgiscripts/">CGI scripts</a><br>
</div>
You can add as many headers and links as you
like. Make sure that the td ID, div ID and ONCLICK tabs are numbered appropriately. Example for a fifth dropdown:
<td ID="head4" align="center" width="113" height="15" class="HEADING"
ONCLICK="ShowHide(4)">Button5</td>
</tr>
<tr>
<td ALIGN="left" bgcolor="#FFFFCC">
<!-- Menu 5 -->
<div ID="Link4" class="LINKSOFF">
<a class="nav" href="dhtml_scripts.html"><b>DHTML
Scripts</b></a><br>
<a class="nav" href="dhtml_menus.html">DHTML menus</a><br>
</div>
|
