Drop Down Menus

|This Brings Menu One| |This Brings Menu Two| |This Brings Menu Three|

The layer placement should (obviously) be set close to the area of mouseOver.

You don't want to call a menu here (menu 4)...

The drop menus are regular layers, and follow all the layer rules.
Note: If you remove a layer, remove the reference to it at the top of the HEAD section, and any code that brings it up. Otherwise you'll get errors.

Get the Codes: Form Fields Zipfile (3.6K)

Below is a code different from the one you see working here. It features four straight, grey menus as seen on autorepaircd.com. Both are available through the links above. You can use what follows here as a reference.

This script will create four drop-down menus near the top of your page. It places hidden layers on the page, that are activated with a mouseover. The layers use these styles, so keep them in your page until you've played around with it and know which styles you can discard (there are a couple of extra styles). There are instructions and everything is color coded and/or bolded for clarity.

<HEAD>....

<STYLE TYPE="text/css"></STYLE>
<script language="JavaScript"> //names of dropdownlayers
f7_droplayer=new Array()
f7_droplayer[0]="drop1"   // Layer names. Colors match below. The layers correspond to the functions. That is,
f7_droplayer[1]="drop2"   //Note that [0] corresponds to drop1, [1] corresponds to drop2, etc.
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

function f7_hideall(){
for(i=0;i<f7_droplayer.length;i++){
f7_hideit=0; f7_checkmousepos(i)
if(f7_ie && f7_keep!=i){
if(f7_hideit){ eval(f7_droplayer[i]+'.style.visibility="hidden"') }
}
if(f7_ns && f7_keep!=i){
if(f7_hideit){ eval('document.'+f7_droplayer[i]+'.visibility="hide"') }
}
}
}

//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;}
}

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"></style>')
}

</script>

</HEAD>

<BODY bgcolor="#FFFFFF" text="#000000" leftmargin="5" topmargin="5" marginwidth="0" marginheight="0">

This section is where the layers are defined. The "showdrop" functions are necessary for the layer to keep itself visible while the mouse is over it. It's default view is hidden. The values in blue set the layer position from top and left, and the length. Change these values to put the layer where you want it. The height of the layers adjust to the text.
<div id="drop1" class="dropdown" style="left: 116px; top: 32px; width: 175px" onMouseOver="f7_showdrop(0)" onMouseOut="f7_hidedrop()">
<p> <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
</div>
<div id="drop2" class="dropdown" style="left: 222px; top: 32px; width: 165px; onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()">
<p> <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text!</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a></p>
</div>
<div id="drop3" class="dropdown" style="left: 340px; top: 32px; width: 170px; onMouseOver="f7_showdrop(2)" onMouseOut="f7_hidedrop()">
<p> <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a></p>
</div>
<div id="drop4" class="dropdown" style="left: 426px; top: 32px; width: 152px" onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()">
<p> <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a><br>
 <a href="yourlink.htm" class="dropitem">Link Text</a></p>
</div>

Below is the code you use to actually call this mess up.
Of course, you can set this action to any intrinsic event.
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()">

Note: Versions of Netscape before 6 will NOT do mouseOvers on images! The mouseOvers above were image map areas. If you want to play it safe and you're using an image to bring the menus on hover, put the image (or text or anything) in a table cell and give the table cell the mouseover action. e.g:
<td onMouseOver="f7_showdrop(1)" onMouseOut="f7_hidedrop()">Cell Content Here</td>

Back

Press H for TWebMan Home | P for PerlScripts | M for MySQL | A or C for Autorepaircd.Com

\|This Brings Menu One\|	\|This Brings Menu Two\|	\|This Brings Menu Three\|
The layer placement should (obviously) be set close to the area of mouseOver.
You don't want to call a menu here (menu 4)...
The drop menus are regular layers, and follow all the layer rules. Note: If you remove a layer, remove the reference to it at the top of the HEAD section, and any code that brings it up. Otherwise you'll get errors.
Get the Codes:	Form Fields	Zipfile (3.6K)
Below is a code different from the one you see working here. It features four straight, grey menus as seen on autorepaircd.com. Both are available through the links above. You can use what follows here as a reference.