target frame ?
Det er måske lidt kludret, men jeg har taget et menu-skelet ned fra en tutorside.Jeg ville dog gerne kunne bruge den med frames og target.Her prøvet forskelligt uden held.Koden beskrives herunder.
Add the following fragment to the head section of your page:
<script language=\"JavaScript1.2\">
/*
Drop down menu link
© Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100\'s more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/
//Contents for menu 1
var menu1=new Array()
menu1[0]=\'<a href=test.htm>Menu link here</a><br>\'
menu1[1]=\'<a href=test.htm>Menu link here</a><br>\'
menu1[2]=\'<a href=test.htm>Menu link here</a><br>\'
//Contents for menu 2
var menu2=new Array()
menu2[0]=\'<a href=test.htm>Menu link here</a><br>\'
menu2[1]=\'<a href=test.htm>Menu link here</a><br>\'
menu2[2]=\'<a href=test.htm>Menu link here</a><br>\'
//Contents for menu 3
var menu3=new Array()
menu3[0]=\'<a href=test.htm>Menu link here</a><br>\'
menu3[1]=\'<a href=test.htm>Menu link here</a><br>\'
menu3[2]=\'<a href=test.htm>Menu link here</a><br>\'
//Contents for menu 4
var menu4=new Array()
menu4[0]=\'<a href=test.htm>Menu link here</a><br>\'
menu4[1]=\'<a href=test.htm>Menu link here</a><br>\'
menu4[2]=\'<a href=test.htm>Menu link here</a><br>\'
//Contents for menu 5
var menu5=new Array()
menu5[0]=\'<a href=test.htm>Menu link here</a><br>\'
menu5[1]=\'<a href=test.htm>Menu link here</a><br>\'
menu5[2]=\'<a href=test.htm>Menu link here</a><br>\'
</script>
<style>
<!--
.iewrap1{
position:relative;
height:30px;
}
.iewrap2{
position:absolute;
}
#dropmenu0, #dropmenu1, #dropmenu2, #dropmenu3, #dropmenu4{
visibility:hide;
z-index:100;
}
-->
</style>
Step 2: Insert the below code into the <body> section of your page where you wish the drop down link(s) to appear. If you had selected to generate more than one drop down menus, you\'ll see that each menu code is separated and indicated by comments. Once you\'ve pasted the below code onto your page, you can decide where to place each menu simply by moving the code inside each commented block to the desired location in your page:
<script language=\"JavaScript1.2\">
//reusable/////////////////////////////
var zindex=100
function dropit2(whichone){
if (window.themenu&&themenu.id!=whichone.id)
themenu.style.visibility=\"hidden\"
themenu=whichone
if (document.all){
themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX
themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (themenu.style.visibility==\"hidden\"){
themenu.style.visibility=\"visible\"
themenu.style.zIndex=zindex++
}
else{
hidemenu()
}
}
}
function dropit(e,whichone){
if (window.themenu&&themenu.id!=eval(whichone).id)
themenu.visibility=\"hide\"
themenu=eval(whichone)
if (themenu.visibility==\"hide\")
themenu.visibility=\"show\"
else
themenu.visibility=\"hide\"
themenu.zIndex++
themenu.left=e.pageX-e.layerX
themenu.top=e.pageY-e.layerY+19
return false
}
function hidemenu(whichone){
if (window.themenu)
themenu.style.visibility=\"hidden\"
}
function hidemenu2(){
themenu.visibility=\"hide\"
}
if (document.all)
document.body.onclick=hidemenu
//reusable/////////////////////////////
</script>
<!----------Menu 1 starts here---------->
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick=\"dropit2(dropmenu0);event.cancelBubble=true;return false\"><font face=Verdana><b><a href=\"alternate.htm\" onClick=\"if(document.layers) return dropit(event, \'document.dropmenu0\')\">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 1 ends here---------->
<!----------Menu 2 starts here---------->
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick=\"dropit2(dropmenu1);event.cancelBubble=true;return false\"><font face=Verdana><b><a href=\"alternate.htm\" onClick=\"if(document.layers) return dropit(event, \'document.dropmenu1\')\">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 2 ends here---------->
<!----------Menu 3 starts here---------->
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick=\"dropit2(dropmenu2);event.cancelBubble=true;return false\"><font face=Verdana><b><a href=\"alternate.htm\" onClick=\"if(document.layers) return dropit(event, \'document.dropmenu2\')\">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 3 ends here---------->
<!----------Menu 4 starts here---------->
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick=\"dropit2(dropmenu3);event.cancelBubble=true;return false\"><font face=Verdana><b><a href=\"alternate.htm\" onClick=\"if(document.layers) return dropit(event, \'document.dropmenu3\')\">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 4 ends here---------->
<!----------Menu 5 starts here---------->
<ilayer height=35px>
<layer visibility=show>
<span class=iewrap1>
<span class=iewrap2 onClick=\"dropit2(dropmenu4);event.cancelBubble=true;return false\"><font face=Verdana><b><a href=\"alternate.htm\" onClick=\"if(document.layers) return dropit(event, \'document.dropmenu4\')\">Click here</a></b></font>
</span>
</span>
</layer>
</ilayer><br>
<!----------Menu 5 ends here---------->
Step 3: Finally, insert the below code at the end of the <body> section, right above the </body> tag:
<div id=dropmenu0 style=\"position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px\">
<script language=\"JavaScript1.2\">
if (document.all)
dropmenu0.style.padding=\"4px\"
for (i=0;i<menu1.length;i++)
document.write(menu1[i])
</script>
</div>
<script language=\"JavaScript1.2\">
if (document.layers){
document.dropmenu0.captureEvents(Event.CLICK)
document.dropmenu0.onclick=hidemenu2
}
</script>
<div id=dropmenu1 style=\"position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px\">
<script language=\"JavaScript1.2\">
if (document.all)
dropmenu1.style.padding=\"4px\"
for (i=0;i<menu2.length;i++)
document.write(menu2[i])
</script>
</div>
<script language=\"JavaScript1.2\">
if (document.layers){
document.dropmenu1.captureEvents(Event.CLICK)
document.dropmenu1.onclick=hidemenu2
}
</script>
<div id=dropmenu2 style=\"position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px\">
<script language=\"JavaScript1.2\">
if (document.all)
dropmenu2.style.padding=\"4px\"
for (i=0;i<menu3.length;i++)
document.write(menu3[i])
</script>
</div>
<script language=\"JavaScript1.2\">
if (document.layers){
document.dropmenu2.captureEvents(Event.CLICK)
document.dropmenu2.onclick=hidemenu2
}
</script>
<div id=dropmenu3 style=\"position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px\">
<script language=\"JavaScript1.2\">
if (document.all)
dropmenu3.style.padding=\"4px\"
for (i=0;i<menu4.length;i++)
document.write(menu4[i])
</script>
</div>
<script language=\"JavaScript1.2\">
if (document.layers){
document.dropmenu3.captureEvents(Event.CLICK)
document.dropmenu3.onclick=hidemenu2
}
</script>
<div id=dropmenu4 style=\"position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px\">
<script language=\"JavaScript1.2\">
if (document.all)
dropmenu4.style.padding=\"4px\"
for (i=0;i<menu5.length;i++)
document.write(menu5[i])
</script>
</div>
<script language=\"JavaScript1.2\">
if (document.layers){
document.dropmenu4.captureEvents(Event.CLICK)
document.dropmenu4.onclick=hidemenu2
}
</script>
Configuring the drop down links: Obviously, you\'ll want to change the links inside the menus to your own. To do so, change the contents inside array \"selectionx[]\" of Step 1. You may also wish to change the width of the drop down menu, depending on the contents. To change it\'s width, go to the code in Step 3. Change the width attribute inside the each <div> from 120 to another pixel value.
Notes: The nature of this script requires that the drop down menu link always be left-aligned in the document. \"So what if I want the link to appear in the center of the page?\", you yell. Well, you\'ll need to use some cheap HTML techniques. One way is to put the link (code of Step 2) inside a columned table that\'s centered. For example:
Sample document:
