Ive been searching for a drop down menu that works like this, (Ive seen it and didnt bookmark the page and cant find it) when moused over the drop down occurs and I want it to stay open until scrolled to the bottom of the links and then pick close, problems been that if people dont have a scroll mouse when you try to go over to the right side of the screen to use that scroll bar the drop down link is gone. I found this script but I get an error on line 62 character 2. Thanks,
<html>
<!-- creation date: 7/5/01 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="">
<meta name="Generator" content="">
</head>
<body>
<style>
A{color:White; text-decoration:none}
A:hover{color:#c0c000}
A:link{text-decoration:none;}
TD{font-family:arial,helvetica; font-size:12pt}
DIV.clTopMenu{position:absolute; width:101; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; }
DIV.clTopMenuBottom{position:absolute; width:101; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#ffffff; background-color:#ffffff; z-index:1}
DIV.clTopMenuText{position:absolute; width:91; left:5; top:15; font-family:arial,helvetica; font-size:12px; z-index:1}
</style>
<script>
/**
Original script by Copyright 1999 Thomas Brattli
This script has been modified and errors corrected by A1 JavaScripts
Visit for more great scripts.
This may be used freely as long as this msg is intact!
***
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
/***
If you want to change the appearens on the text, background-colors, size or
anything do that in the style tag above.
This menu might not be as easy to adapt to your own site, but please
play around with it before you mail me for help
***/
/***
Variables to set.
***/
//How many menus do you have? (remember to copy and add divs in the body if you add menus)
var numberOfMenus=5
//The width on the menus (set the width in the stylesheet as well)
var mwidth=101
//Pixels between the menus
var pxBetween=10
//The first menus left position
var fromLeft=20
//The top position of the menus
var fromTop=10
//The bgColor of the bottom mouseover div
var bgColor='#ffffff'
//The bgColor to change to
var bgColorChangeTo='#c0c000'
//The position the mouseover line div will stop at when going up!
var imageHeight=11
/***
You shouldn't have to change anything below this
***/
//Object constructor
function makeNewsMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=
?
eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this"
}
//Objects methods
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
if{this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
}else this.css.clip="rect("+t+","+r+","+b+","+l+"";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y>ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y<ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
oTopMenu=new Array()
for(i=0;i<=numberOfMenus;i++){
oTopMenu=new Array()
oTopMenu[0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[1].moveIt(0,imageHeight)
oTopMenu[0].clipTo(0,mwidth,imageHeight+3,0)
oTopMenu[0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)
oTopMenu[0].css.visibility="visible"
}
}
//Moves the menu
function topMenu(num){
if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}
function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}
//Calls the init function onload
onload=newsMenuInit;
</script>
<!-- --><div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(ie)this.blur(); return false"><img src="clickformenu.gif" width=101 height=11 alt="" border=0 align="top"></a>
<div id="divTopMenuText0" class="clTopMenuText"><center>
<a href=" URL/" ONMOUSEOVER="window.status='Search TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" target="five" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a></center>
</div>
<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>
</body>
</html>
<html>
<!-- creation date: 7/5/01 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="">
<meta name="Generator" content="">
</head>
<body>
<style>
A{color:White; text-decoration:none}
A:hover{color:#c0c000}
A:link{text-decoration:none;}
TD{font-family:arial,helvetica; font-size:12pt}
DIV.clTopMenu{position:absolute; width:101; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; }
DIV.clTopMenuBottom{position:absolute; width:101; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#ffffff; background-color:#ffffff; z-index:1}
DIV.clTopMenuText{position:absolute; width:91; left:5; top:15; font-family:arial,helvetica; font-size:12px; z-index:1}
</style>
<script>
/**
Original script by Copyright 1999 Thomas Brattli
This script has been modified and errors corrected by A1 JavaScripts
Visit for more great scripts.
This may be used freely as long as this msg is intact!
***
Browsercheck:*/
ie=document.all?1:0
n=document.layers?1:0
/***
If you want to change the appearens on the text, background-colors, size or
anything do that in the style tag above.
This menu might not be as easy to adapt to your own site, but please
play around with it before you mail me for help
***/
/***
Variables to set.
***/
//How many menus do you have? (remember to copy and add divs in the body if you add menus)
var numberOfMenus=5
//The width on the menus (set the width in the stylesheet as well)
var mwidth=101
//Pixels between the menus
var pxBetween=10
//The first menus left position
var fromLeft=20
//The top position of the menus
var fromTop=10
//The bgColor of the bottom mouseover div
var bgColor='#ffffff'
//The bgColor to change to
var bgColorChangeTo='#c0c000'
//The position the mouseover line div will stop at when going up!
var imageHeight=11
/***
You shouldn't have to change anything below this
***/
//Object constructor
function makeNewsMenu(obj,nest){
nest=(!nest) ? '':'document.'+nest+'.'
this.css=
? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')
this.moveIt=b_moveIt;this.bgChange=b_bgChange;
this.slideUp=b_slideUp; this.slideDown=b_slideDown;
this.clipTo=b_clipTo;
this.obj = obj + "Object"; eval(this.obj + "=this"
}
//Objects methods
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
if
{this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l}else this.css.clip="rect("+t+","+r+","+b+","+l+"
";}
function b_slideUp(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y>ystop){
this.moveIt(this.x,this.y-5); eval(wh)
setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
function b_slideDown(ystop,moveby,speed,fn,wh){
if(!this.slideactive){
if(this.y<ystop){
this.moveIt(this.x,this.y+5); eval(wh)
setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
}else{
this.slideactive=false; this.moveIt(0,ystop); eval(fn)
}
}
}
//Initiating the page, making cross-browser objects
function newsMenuInit(){
oTopMenu=new Array()
for(i=0;i<=numberOfMenus;i++){
oTopMenu=new Array()
oTopMenu[0]=new makeNewsMenu('divTopMenu'+i)
oTopMenu[1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
oTopMenu[2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
oTopMenu[1].moveIt(0,imageHeight)
oTopMenu[0].clipTo(0,mwidth,imageHeight+3,0)
oTopMenu[0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)
oTopMenu[0].css.visibility="visible"
}
}
//Moves the menu
function topMenu(num){
if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
}
//Changes background onmouseover
function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}
function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}
//Calls the init function onload
onload=newsMenuInit;
</script>
<!-- --><div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(ie)this.blur(); return false"><img src="clickformenu.gif" width=101 height=11 alt="" border=0 align="top"></a>
<div id="divTopMenuText0" class="clTopMenuText"><center>
<a href=" URL/" ONMOUSEOVER="window.status='Search TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>
<a href=" URL/" target="five" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a></center>
</div>
<div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>
</body>
</html>
