DHTML Drop Down Menu

[Mox]

Hi - I found this code at computerarts.co.uk - which is fantastic as it "almost" works in both Netscape and IE. It works up to a point but if you move your mouse too quickly between the options it freezes up. If you adjust the ms time to work in Netscape it freezes up in IE and vice versa. Can anyone throw any light on this???!!!

Thanks in anticipation!!

Here's the code:

<script language="JavaScript"><!--

//names of dropdowns stored here
f7_droplayer=new Array()
f7_droplayer[0]="drop1"
f7_droplayer[1]="drop2"
f7_droplayer[2]="drop3"
f7_droplayer[3]="drop4"
f7_droplayer[4]="drop5"
f7_droplayer[5]="drop6"
f7_droplayer[6]="drop7"


//simple 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]+'.scrollWidth')
f7_y_min=eval(f7_droplayer[i]+'.style.pixelTop')
f7_y_max=f7_y_min+eval(f7_droplayer[i]+'.scrollHeight')
}
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()',1000)
}
else { f7_hideit=1 }
return f7_hideit
}

//--></script>
<script language="JavaScript"><!--

//browser stylesheets

if(f7_ie){
document.write('<style type="text/css"><!--')

document.write('.dropdown {height:1px; width:1px; padding-left:10px; padding-top:10px; padding-right:10px; padding-bottom:10px;}')
document.write('p { margin-top:0px; margin-bottom:6px }')
document.write('a { text-decoration: none }')
document.write('a:hover { color: white; text-decoration: underline }')
document.write('--></style>')
}

//--></script>

<style type="text/css">
<!--

p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; line-height:17px}
td { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}

.header { font: bold 24px Arial, Verdana, Helvetica, sans-serif }
.subhead { font-weight: bold; font-size: 12px }
.list { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; text-decoration: none }
.forms { font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif }

.dropdown1 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:0px; z-index:1; visibility: hidden ;}
.dropdown2 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:20px; z-index:1; visibility: hidden ;}
.dropdown3 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:40px; z-index:1; visibility: hidden ;}
.dropdown4 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:60px; z-index:1; visibility: hidden ;}
.dropdown5 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:80px; z-index:1; visibility: hidden ;}
.dropdown6 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:100px; z-index:1; visibility: hidden ;}
.dropdown7 { position: absolute; color:black; width:140px; border: #000000; border-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; background-color: #EFEFEF; layer-background-color: #EFEFEF; top:120px; z-index:1; visibility: hidden ;}
.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: bold }
.dropitem:visited { color:red; font: bold }

-->
</style>
</head>

<body text="#FFFFFF" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" leftmargin="0"
topmargin="0" marginwidth="0" marginheight="0" bgcolor="#FFFFFF">
<div id="drop1" class="dropdown1" style="left:61px;" onmouseover="f7_showdrop(0)"
onmouseout="f7_hidedrop()">

<p>• <a href="http://www.yahoo.co.uk" class="dropitem">Yahoo</a><br>
• <a href="#" class="dropitem">Link 1</a><br>
• <a href="#" class="dropitem">Link 1</a><br>
• <a href="#" class="dropitem">Link 1</a></p>
</div><div id="drop2" class="dropdown2" style="left:61px;" onmouseover="f7_showdrop(1)"
onmouseout="f7_hidedrop()">

<p>• <a href="#" class="dropitem">Link 2</a><br>
• <a href="#" class="dropitem">Link 2</a><br>
• <a href="#" class="dropitem">Link 2</a><br>
• <a href="#" class="dropitem">Link 2</a></p>
</div><div id="drop3" class="dropdown3" style="left:61px;" onmouseover="f7_showdrop(2)"
onmouseout="f7_hidedrop()">

<p>• <a href="#" class="dropitem">Link 3</a><br>
• <a href="#" class="dropitem">Link 3</a><br>
• <a href="#" class="dropitem">Link 3</a><br>
• <a href="#" class="dropitem">Link 3</a></p>
</div><div id="drop4" class="dropdown4" style="left:61px;" onmouseover="f7_showdrop(3)"
onmouseout="f7_hidedrop()">

<p>• <a href="#" class="dropitem">Link 4</a><br>
• <a href="#" class="dropitem">Link 4</a><br>
• <a href="#" class="dropitem">Link 4</a><br>
• <a href="#" class="dropitem">Link 4</a></p>
</div><div id="drop5" class="dropdown5" style="left:61px;" onmouseover="f7_showdrop(4)"
onmouseout="f7_hidedrop()">

<p>• <a href="#" class="dropitem">Link 5</a><br>
• <a href="#" class="dropitem">Link 5</a><br>
• <a href="#" class="dropitem">Link 5</a><br>
• <a href="#" class="dropitem">Link 5</a></p>
</div><div id="drop6" class="dropdown6" style="left:61px;" onmouseover="f7_showdrop(5)"
onmouseout="f7_hidedrop()">

<p>• <a href="#" class="dropitem">Link 6</a><br>
• <a href="#" class="dropitem">Link 6</a><br>
• <a href="#" class="dropitem">Link 6</a><br>
• <a href="#" class="dropitem">Link 6</a></p>
</div><div id="drop7" class="dropdown7" style="left:61px;" onmouseover="f7_showdrop(6)"
onmouseout="f7_hidedrop()">

<p>• <a href="#" class="dropitem">Link 7</a><br>
• <a href="#" class="dropitem">Link 7</a><br>
• <a href="#" class="dropitem">Link 7</a><br>
• <a href="#" class="dropitem">Link 7</a></p>
</div>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="100" border="0" cellspacing="0" cellpadding="0" height="30">
<tr align="center">
<td width="62" bgcolor="#FFFFFF"><p align="left"><a href="#" class="drophead"
onmouseover="f7_showdrop(0)" onmouseout="f7_hidedrop()"><b><u>News</u></b></a> </td>
</tr>
<tr align="center">
<td width="62" bgcolor="#FFFFFF"><p align="left"><a href="#" class="drophead"
onmouseover="f7_showdrop(1)" onmouseout="f7_hidedrop()"><b><u>Tutorials</u></b></a> </td>
</tr>
<tr align="center">
<td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
onmouseover="f7_showdrop(2)" onmouseout="f7_hidedrop()"><b><u>Reviews</u></b></a> </td>
</tr>
<tr align="center">
<td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
onmouseover="f7_showdrop(3)" onmouseout="f7_hidedrop()"><b><u>Resources</u></b></a> </td>
</tr>
<tr align="center">
<td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
onmouseover="f7_showdrop(4)" onmouseout="f7_hidedrop()"><b><u>Videos</u></b></a> </td>
</tr>
<tr align="center">
<td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
onMouseOver="f7_showdrop(5)" onMouseOut="f7_hidedrop()"><b><u>Forum</u></b></a> </td>
</tr>
<tr align="center">
<td bgcolor="#FFFFFF" width="62"><p align="left"><a href="#" class="drophead"
onMouseOver="f7_showdrop(6)" onMouseOut="f7_hidedrop()"><b><u>Magazine</u></b></a> </td>
</tr>
</table>
</td>
</tr>
</table>
</body>

[lucas]

i suggest the hiermenus at dhtml.com, they have the most indepth testing and trouble free option of any dhtml menu i have ever seen. i use them on my site.

[lynlimz]

Originally posted by lucas
i suggest the hiermenus at dhtml.com, they have the most indepth testing and trouble free option of any dhtml menu i have ever seen. i use them on my site.

grab dhtml menu builder from http://software.xfx.net
none is better. supports all the browsers.

IE/NS4/NS6/Opera4/Opera5

[kdog316]

the dhtml one is free the softwarefx isnt and i have tried it its kind of hard. so if you are looking foro one where you cant custimize that much then just use fireworks