|
EXAMPLE
1) Insert this code 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 in the <BODY> section where you want the
dropdown menu
to appear in the page.
4) Define the style of the headers, the dropdown menus
and the links in this section of the style command:
<style>
<!--
.header {font-family: verdana; font-size: 9pt; color: #000080; text-decoration: none; cursor: none }
.header:hover {font-family: verdana; font-size: 9pt; color: #FF2200; text-decoration: none; cursor: hand }
.subheader {font-family: verdana; font-size: 8pt; color: #000080; text-decoration: none; cursor: none }
.subheader:hover {font-family: verdana; font-size: 8pt; color: #FF2200; text-decoration: none; cursor: hand }
.popup { border-right: #FF6633 1px solid; border-top: #ff6633
1px solid; background: #FFFFCC;
border-left: #FF6633 1px solid; border-bottom: #FF6633 1px solid; font-style: normal; font-size:
8pt}
-->
</style>
Note: you can add different styles and assign
them to each dropdown.
5) Define the menu items, assign them the
appropriate dropdown ID and set the timer in this section of the HTML code:
<!-- Menu items -->
<table cellspacing="0" cellpadding="0" border="1" bgcolor="#FFFFCC" bordercolor="#ff6633" bordercolorlight="#ff6633" bordercolordark="#ff6633">
<tbody>
<tr>
<td height="20"><a onmouseover="openclose('dropdown1')"
onmouseout="timerID=setTimeout('closeall()',2000)" href="http://planmagic.com/"
class="header">PlanMagic</a></td>
<td height="20"><a onmouseover="openclose('dropdown2')"
onmouseout="timerID=setTimeout('closeall()',2000)" href="http://planmagic.com/business_planning.html"
class="header">Business plan</a></td>
6) Define the content, the style and the
positioning of the dropdowns in this section of the HTML code:
<!-- Dropdowns -->
<div id="dropdown1" style="LEFT: 117px;
VISIBILITY: hidden; WIDTH: 392px; POSITION: absolute; TOP: 25px; HEIGHT: 23px">
<table class="popup" onmouseover="clearTimeout(timerID)" onmouseout="timerID=setTimeout('closeall()',1000)" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td><img src="script_files/arrow.gif" border="0" width="8" height="8">
<a href="http://planmagic.com/" class="subheader">Home</a>
<img src="script_files/arrow.gif" border="0" width="8" height="8">
<a href="products.html" class="subheader">Products</a></td>
</tr>
</tbody>
</table>
</div>
<div id="dropdown2" style="LEFT: 189px; VISIBILITY: hidden; WIDTH: 334px; POSITION: absolute; TOP:
25px; HEIGHT: 8px">
<table class="popup" onmouseover="clearTimeout(timerID)" onmouseout="timerID=setTimeout('closeall()',1000)" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td><img src="script_files/arrow.gif" border="0" width="8" height="8">
<a href="business_planning.html" class="subheader">Features</a>
<img src="script_files/arrow.gif" border="0" width="8" height="8"> <a href="download.html" class="subheader">Download</a></td>
</tr>
</tbody>
</table>
</div>
7) If you need to add or remove a
dropdown, make sure you edit the menu.js accordingly. Below is an example with
7 dropdowns:
var timerID = null;
drop1state=0
drop2state=0
drop3state=0
drop4state=0
drop5state=0
drop6state=0
drop7state=0
}
if((drop1state==1)|(drop2state==1)|(drop3state==1)|(drop4state==1)
|(drop5state==1)|(drop6state==1)|(drop7state==1))
{
if (ie){
dropdown1.style.visibility="hidden";
dropdown2.style.visibility="hidden";
dropdown3.style.visibility="hidden";
dropdown4.style.visibility="hidden";
dropdown5.style.visibility="hidden";
dropdown6.style.visibility="hidden";
dropdown7.style.visibility="hidden" //
no semicolon at the end of the last line
}
else if (n){
document.dropdown1.visibility="hide";
document.dropdown2.visibility="hide";
document.dropdown3.visibility="hide";
document.dropdown4.visibility="hide";
document.dropdown5.visibility="hide";
document.dropdown6.visibility="hide";
document.dropdown7.visibility="hide" //
no semicolon at the end of the last line
}
drop1state=0; drop2state=0; drop3state=0; drop4state=0; drop5state=0; drop6state=0;
drop7state=0;
etc.
8) Define where the menu.js file is located in the <HEAD>
section:
<SCRIPT src="script_files/menu.js"
type=text/javascript></SCRIPT>
|
