Get Drop Menu Layers Script Here

Get the Drop Menu Script

Four layers, Identical formatting

//browser check
f7_v4=(parseInt(navigator.appVersion)>=4 && parseInt(navigator.appVersion)<=5)?1:0
f7_ie=(document.all && f7_v4)?1:0
f7_ns=(document.layers && f7_v4)?1:0

//code for drops
function f7_showdrop(thelayer){
f7_keep=thelayer; f7_hideall(); f7_showitnow=1
f7_showit(thelayer)
}

function f7_showit(thelayer){
if(f7_ie){ eval(f7_droplayer[thelayer]+'.style.visibility="visible"') }
if(f7_ns){ eval('document.'+f7_droplayer[thelayer]+'.visibility="show"');}
}

function f7_hidedrop(){
f7_keep=-1; setTimeout('f7_hideall()',500)
}

f7_keep=-1

function f7_getmousepos(e){
if(f7_ns){f7_mousex=e.pageX; f7_mousey=e.pageY}
if(f7_ie){f7_mousex=event.clientX; f7_mousey=event.clientY;}
}

function f7_checkmousepos(i){
if(f7_ns){
f7_x_min=eval('document.'+f7_droplayer[i]+'.left')
f7_x_max=f7_x_min+eval('document.'+f7_droplayer[i]+'.clip.width')
f7_y_min=eval('document.'+f7_droplayer[i]+'.top')
f7_y_max=f7_y_min+eval('document.'+f7_droplayer[i]+'.clip.height')
}
if(f7_ie){
f7_x_min=eval(f7_droplayer[i]+'.style.pixelLeft')
f7_x_max=f7_x_min+eval(f7_droplayer[i]+'.style.pixelWidth')
f7_y_min=eval(f7_droplayer[i]+'.style.pixelTop')
f7_y_max=f7_y_min+eval(f7_droplayer[i]+'.style.pixelHeight')
}
if (f7_mousex>=f7_x_min && f7_mousex<=f7_x_max && f7_mousey>=f7_y_min && f7_mousey<=f7_y_max){
f7_hideit=0; setTimeout('f7_hideall()',500)
}
else { f7_hideit=1 }
return f7_hideit
}
</script>
<script language="JavaScript">

//browser stylesheets
if(f7_ie){
document.write('<style type="text/css"></style>')
}
</script>
<div id="drop2" class="dropdown" style="left: 222px; top: 32px; width: 165px; onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()"> 
        <p>• <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htmm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text!</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><p><p><p><p><p><p><p><p><p><p><p><p></p>
      </div>
      <div id="drop3" class="dropdown" style="left: 340px; top: 32px; width: 170px; onMouseOver="f7_showdrop(2)" onMouseOut="f7_hidedrop()"> 
        <p>• <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><p><p><p><p><p><p><p><p><p><p><p><p></p>
      </div>
      <div id="drop4" class="dropdown" style="left: 426px; top: 32px; width: 152px" onMouseOver="f7_showdrop(3)" onMouseOut="f7_hidedrop()"> 
        <p>• <a href="../script/js/yourlink.html" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
          • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><p><p><p><p><p><p><p><p><p><p><p><p></p>
      </div>
      <p>• <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
        • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
        • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
        • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
        • <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
• <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
• <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
• <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
• <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>
• <a href="../script/js/yourlink.htm" class="dropitem">Link Text</a><br>

onMouseOver="f7_showdrop(0)" onMouseOut="f7_hidedrop()">
onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()">
onMouseOver="f7_showdrop(2)" onMouseOut="f7_hidedrop()"> 
onMouseOver="f7_showdrop(3)" onMouseOut="f7_hidedrop()">

Four Layers, different formatting (like the sample page):

<STYLE TYPE="text/css">
.header { font: bold 24px Arial, Verdana, Helvetica, sans-serif }
.pagedef { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 18px }
.subhead { font-weight: bold; font-size: 12px }
.dropdown { position: absolute; color:black; width:140px; background-color: #CCCCCC; layer-background-color: #EFEFEF; top:110px; z-index:1; visibility: hidden ;; border: 1px #000000 solid}
.drophead { color:#333333; font: bold 12px Verdana, Arial, Helvetica, sans-serif; text-decoration:none }
.dropitem { text-decoration:none; color:black; font: 12px Arial, Verdana, Helvetica, sans-serif;}
.drophead:hover { color:black; text-decoration:none }
.dropitem:hover { color:black; font-weight: bold; text-decoration: none; cursor: crosshair}
a { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none; color: 006699}
p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: normal; font-style: normal; line-height: normal}
a:hover { font-weight: normal; text-decoration: underline}
.linkhead { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-weight: bold; color: #0066CC}
.blulink { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; color: #006699; text-decoration: none; cursor: crosshair}
.slist { font-weight: bold; font-size: 12px ; list-style-type: circle; vertical-align: middle}
.topmenu { cursor: crosshair; background-image: url(../images/vehicles1..gif)}
.sidehead { color:#333333; font: bold 14px Arial, Helvetica, sans-serif; text-decoration:none }
.sidetxt { font-weight: normal; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #000000}
.sidelnk { font-weight: normal; font-size: 10px; font-family: Arial, Helvetica, sans-serif; color: #000000 ; text-decoration: underline}
.sidefont { font-weight: normal; font-size: 12px; font-family: Arial, Helvetica, sans-serif; color: #000000}
.header2 { font: bold 18px Arial, Verdana, Helvetica, sans-serif}
.sideitem { text-decoration:underline; color:black; font: 12px Arial, Verdana, Helvetica, sans-serif; } 
.dropdownMoreBorder { position: absolute; color:black; background-color: #FFFFFF; layer-background-color: #EFEFEF; top:110px; z-index:1; visibility: hidden ;; border: 2px #000000 solid; border-width: 2px 2px 2px}
</STYLE>
<script language="JavaScript">//names of dropdowns
f7_droplayer=new Array()
f7_droplayer[0]="drop1"
f7_droplayer[1]="drop2"
f7_droplayer[2]="drop3"
f7_droplayer[3]="drop4"

//browser check
f7_v4=(parseInt(navigator.appVersion)>=4 && parseInt(navigator.appVersion)<=5)?1:0
f7_ie=(document.all && f7_v4)?1:0
f7_ns=(document.layers && f7_v4)?1:0

//code for drops

function f7_showdrop(thelayer){
f7_keep=thelayer; f7_hideall(); f7_showitnow=1
f7_showit(thelayer)
}

function f7_showit(thelayer){
if(f7_ie){ eval(f7_droplayer[thelayer]+'.style.visibility="visible"') }
if(f7_ns){ eval('document.'+f7_droplayer[thelayer]+'.visibility="show"');}
}

function f7_hidedrop(){
f7_keep=-1; setTimeout('f7_hideall()',500)
}

f7_keep=-1

//deal with cursor over layer
document.onmousemove = f7_getmousepos
if (f7_ns) document.captureEvents(Event.MOUSEMOVE)

function f7_getmousepos(e){
if(f7_ns){f7_mousex=e.pageX; f7_mousey=e.pageY}
if(f7_ie){f7_mousex=event.clientX; f7_mousey=event.clientY;}
}

<div id="drop1" class="dropdown" style="left: 60px; top: 20px; width: 160px" onMouseOver="f7_showdrop(0)" onMouseOut="f7_hidedrop()"> 
  <p><font face="Arial, Helvetica, sans-serif" size="2">From Left, 60 pixels.<br>
    From Top, 20 pixels.</font> 
</div>
<div id="drop2" class="dropdown" style="left: 200px; top: 20px; width: 180px; background-color: #FFFF00; layer-background-color: #FFFF00" onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()"> 
  <p><font face="Arial, Helvetica, sans-serif" size="2">From Left, 200 pixels.<br>
    From Top, 20 pixels.</font><p><p><p><p><p><p><p><p><p><p></p>
</div>
<div id="drop3" class="dropdown" style="left: 380px; top: 20px; width: 170px; background-color: #EEEEEE; layer-background-color: #EEEEEE" onMouseOver="f7_showdrop(2)" onMouseOut="f7_hidedrop()"> 
  <p><font face="Arial, Helvetica, sans-serif" size="2">From Left, 380 pixels.<br>
    From Top, 20 pixels</font><p><p><p><p><p><p><p><p><p><p></p>
</div>
<div id="drop4" class="dropdown" style="left: 340px; top: 100px; width: 152px; background-color: #FFCCFF; layer-background-color: #FFCCFF" onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()"> 
  <div align="center"><b><font face="Arial, Helvetica, sans-serif"><br>
    ...to bring it up <br>
    way over here! !<br>
    </font></b></div>
</div>
<p> 
<table width="600">
  <tr> 
    <td width="33%" onMouseOver="f7_showdrop(0)" onMouseOut="f7_hidedrop()"><span style "pagedef"><b><font size="2">|This 
      Brings Menu One|</font></b></span></td>
    <td width="33%" onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()"><span style "pagedef"><b><font size="2">|</font></b></span><font size="2"><b>This 
      Brings Menu Two<span style "pagedef">|</span></b></font></td>
    <td width="33%" onMouseOver="f7_showdrop(2)" onMouseOut="f7_hidedrop()"><span style "pagedef"><b><font size="2">|</font></b></span><b><font size="2">This 
      Brings Menu Three<span style "pagedef">|</span></font></b></td>
  </tr>

Back to the Scripts | TWebman Home | JavaScripts Home | Forget this, give me the Zipfile