[Beschreibung]
Vertikale Navigation, bei der sich bei Mausklick auf einen Link ein Untermenu öffnet.
[Kompatibilität]
[Code]
//Drop down menu link- © Dynamic Drive (www.dynamicdrive.com) //For full source code and 100's more DHTML scripts, visit http://www.dynamicdrive.com //Credit MUST stay intact for use
//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>'
</script>
<style> <!-- .wrap1{ position:relative; } .wrap2{ position:absolute; } #dropmenu0, #dropmenu1, #dropmenu2, #dropmenu3{ z-index:100; } --> </style>
//Drop down menu by http://www.dynamicdrive.com
var zindex=100 var ns4=document.layers var ns6=document.getElementById&&!document.all var ie4=document.all var opr=navigator.userAgent.indexOf("Opera")
function dropit(e,whichone){ curmenuID=ns6? document.getElementById(whichone).id : eval(whichone).id if (window.themenu&&themenu.id!=curmenuID) themenuStyle.visibility=ns4?"hide" : "hidden"
themenu=ns6? document.getElementById(whichone): eval(whichone) themenuStyle=(ns6||ie4)? themenu.style : themenu
themenuoffsetX=(ie4&&opr==-1)? document.body.scrollLeft : 0 themenuoffsetY=(ie4&&opr==-1)? document.body.scrollTop : 0
themenuStyle.left=ns6||ns4? e.pageX-e.layerX : themenuoffsetX+event.clientX-event.offsetX themenuStyle.top=ns6||ns4? e.pageY-e.layerY+19 : themenuoffsetY+event.clientY-event.offsetY+18
hiddenconst=(ns6||ie4)? "hidden" : "hide" if (themenuStyle.visibility==hiddenconst){ themenuStyle.visibility=(ns6||ie4)? "visible" : "show" themenuStyle.zIndex=zindex++ } else hidemenu() return false }
function hidemenu(){ if ((ie4||ns6)&&window.themenu) themenuStyle.visibility="hidden" else if (ns4) themenu.visibility="hide" }
if (ie4||ns6) document.onclick=hidemenu
//reusable///////////////////////////// </script>
<!----------Menu 1 starts here---------->
<ilayer> <layer visibility=show> <div class=wrap1> <span class=wrap2 onClick="dropit(event, 'dropmenu0');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu0')">Click here</a></b></font> </span> </div> </layer> </ilayer><br> <!----------Menu 1 ends here---------->
<!----------Menu 2 starts here---------->
<ilayer> <layer visibility=show> <div class=wrap1> <span class=wrap2 onClick="dropit(event, 'dropmenu1');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu1')">Click here</a></b></font> </span> </div> </layer> </ilayer><br> <!----------Menu 2 ends here---------->
<!----------Menu 3 starts here---------->
<ilayer> <layer visibility=show> <div class=wrap1> <span class=wrap2 onClick="dropit(event, 'dropmenu2');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu2')">Click here</a></b></font> </span> </div> </layer> </ilayer><br> <!----------Menu 3 ends here---------->
<!----------Menu 4 starts here---------->
<ilayer> <layer visibility=show> <div class=wrap1> <span class=wrap2 onClick="dropit(event, 'dropmenu3');event.cancelBubble=true;return false"><font face=Verdana><b><a href="alternate.htm" onClick="if(ns4) return dropit(event, 'document.dropmenu3')">Click here</a></b></font> </span> </div> </layer> </ilayer><br> <!----------Menu 4 ends here---------->
<div id=dropmenu0 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px 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=hidemenu } </script>
<div id=dropmenu1 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px 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=hidemenu } </script>
<div id=dropmenu2 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px 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=hidemenu } </script>
<div id=dropmenu3 style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:1px 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=hidemenu } </script>
DynamicDrive
Kopieren Sie bitte den Code