Mouseover Navigation

Bei diesem Javascript könnt ihr bei Links zusätzliche Listen definieren, die sich öffnen, wenn man mit der Maus über den Link fährt.

Die Anzahl der Mouseover-Links und die Ziele könnt ihr natürlich auch selbst festlegen.

Oben im Script ist definiert, wo wie wann was zu stehen hat. Die Einträge für das eigentliche Menü sind unter linkset zu finden. Die [0] nach linkset ist für den ersten Menüpunkt (unten) und die [1] logischerweise für den zweiten.

Unter dem Javascript-Block findet ihr zwei Links mit jeweils einem onmouseover und einem onmouseout Attribut, welches die Mouseover-Links dann erscheinen lässt.

PS: Aktuell ist das Mouseover-Menu leider zu weit unter dem Link in unserer Demo zu finden – das wird in der nächsten Zeit mit behoben.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- var defaultMenuWidth="150px"; //Breite des Menüs. var linkset=new Array(); // Menüsets und die zugehörigen Links. linkset[0]='<a href="http://www.google.com">Google</a>'; linkset[0]+='<hr>' //Optionale Trennlinie linkset[0]+='<a href="https://www.kostenlose-javascripts.de">Kostenlose Javascripts</a>'; linkset[0]+='<a href="http://www.socialbookmark.eu">Social Bookmarks</a>'; linkset[0]+='<a href="http://www.joomla.org">Joomla</a>'; linkset[1]='<a href="http://www.golem.de">Golem.de</a>'; linkset[1]+='<a href="http://www.heise.de">Heise.de</a>'; linkset[1]+='<a href="http://www.zdnet.de">zdnet</a>'; linkset[1]+='<a href="http://www.saxxess.com">Saxxess</a>'; // Ab hier nichts mehr ändern document.write('<style type="text/css">'); document.write('#popitmenu{ position: absolute; top: -200px; background-color: white; border:1px solid black; font: normal 12px Verdana; line-height: 18px; z-index: 100; display: none; }'); document.write('#popitmenu a{ text-decoration: none; padding-left: 6px; color: black; display: block; }'); document.write('#popitmenu a:hover{ background-color: #CCFF9D; }'); document.write('</style>'); var ie5=document.all && !window.opera; var ns6=document.getElementById; if (ie5||ns6) document.write('<div id="popitmenu" onmouseover="clearhidemenu();" onmouseout="dynamichide(event)"></div>'); function iecompattest(){ return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body; } function showmenu(e, which, optWidth){ if (!document.all&&!document.getElementById) return; clearhidemenu(); menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu"); menuobj.innerHTML=which; menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth; menuobj.contentwidth=menuobj.offsetWidth; menuobj.contentheight=menuobj.offsetHeight; eventX=ie5? event.clientX : e.clientX; eventY=ie5? event.clientY : e.clientY; //Find out how close the mouse is to the corner of the window var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX; var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY; //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<menuobj.contentwidth) menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"; else menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"; //same concept with the vertical position if (bottomedge<menuobj.contentheight) menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"; else menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"; menuobj.style.display="block"; return false; } function contains_ns6(a, b) { //Determines if 1 element in contained in another- by Brainjar.com while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function hidemenu(){ if (window.menuobj) menuobj.style.display="none"; } function dynamichide(e){ if (ie5&&!menuobj.contains(e.toElement)) hidemenu(); else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) hidemenu(); } function delayhidemenu(){ delayhide=setTimeout("hidemenu()",500); } function clearhidemenu(){ if (window.delayhide) clearTimeout(delayhide); } if (ie5||ns6) document.onclick=hidemenu; //--> </script> <br /> <a href="#" onmouseover="showmenu(event,linkset[0])" onmouseout="delayhidemenu()">Allgemeine Liste</a><br /> <a href="#" onmouseover="showmenu(event,linkset[1], '180px')" onmouseout="delayhidemenu()">Nachrichtenseiten</a> <p> </p> <p> </p> <p> </p> <p> </p> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/texteffekte/mouseover-navigation/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">function addEvent889(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false)}else if(obj.attachEvent){obj["e"+type+fn]=fn;obj[type+fn]=function(){obj["e"+type+fn](window.event)};obj.attachEvent("on"+type,obj[type+fn])}};addEvent889(window,'load',SecondPast);</script> <!-- präsentiert von kostenlose-javascripts.de -->