Spin Menü
Scripte > Menü Navigation
Ein sich im Kreis drehendes Spin Menü
Ein einfaches kleines Menü, das dennoch sehr effektvoll aussieht. Das Menü ist leicht erweiterbar und kann auf die eigenen Bedürfnisse an die Homepage angepasst werden. Die Anpassungen erfolgen in der separaten Datei "spin_menu.html" auf dem Webserver.
Leider funktioniert der Code nur in Einbindung als iframe <iframe>...</iframe>.
Somit lässt sich das Menü auch in mehreren Webseiten einbinden, wobei Änderungen dann nur in einer Datei ausgeführt werden müssen.
ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HTML-Code dann einfach nur in den BODY-Bereich <body>.....</body> der aufrufende Datei einfügen.
Code für den <BODY> Bereich
<iframe name="Spinmenu" src="wsX5Obj/Obj13_0/spin_menu.html" width="400" frameborder="0" scrolling="no"></iframe>
Code Datei "spin_menu.html"
<div style="position: absolute; top: 10px; left: 10px">
<script type="text/javascript">
//Folgende Zeile enthält diverse Styleanpassungen (identisch ab Zeile 27)//Folgende 24 Zeilen ohne Zeilenumbruch und Leerzeichen im Scripteye={p:0,x:0,y:0,w:0,h:0,r:0,v:0,s:0,isVertical:0,a1:0,a2:0,a3:0,color:'#7C6031',colorover:'#7C6031',backgroundcolor:'#EEF6E9',backgroundcolorover:'#B4DA9F',bordercolor:'#7C6031',fontsize:16,fontfamily:'tahoma',pas:0,spinmenu:function(){this.p=this.r/this.s;this.a1=this.a2=this.isVertical?0:Math.PI/2},spinmenuitem:function(a7,a6,a5){a4=" onclick='window.open(\""+a6+"\""+(a5?(",\""+a5+"\""):",\"_self\"")+")'";document.write("<div id='spinmenu"+this.a3+"' style='cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:2px solid"+this.bordercolor+";font:bold "+this.fontsize+"px "+this.fontfamily+";text-align:center;cursor:default;z-Index:1000;' onmouseover='this.style.color=\""+this.colorover+"\";this.style.backgroundColor=\""+this.backgroundcolorover+"\"'"+ "onmouseout='this.style.color=\""+this.color+"\";this.style.backgroundColor=\""+this.backgroundcolor+"\"'"+a4+">"+a7+"</div>");this.a3++},muta:function(){a8=document.getElementById("controale");for(i=0;i<this.a3;i++){a9=document.getElementById("spinmenu"+i+"");a9s=a9.style;if(this.isVertical){xi=parseInt(this.r*Math.cos(this.a1+i*this.pas))/this.s;yi=parseInt(this.r*Math.sin(this.a1+i*this.pas));a10=(this.p+xi)/(2*this.p);a11=this.fontsize*(this.p+xi)/(2*this.p)+2;a12=parseInt(100*(this.p+xi)/(2*this.p))}else{xi=parseInt(this.r*Math.cos(this.a1+i*this.pas));yi=parseInt(this.r*Math.sin(this.a1+i*this.pas))/this.s;a10=(this.p+yi)/(2*this.p);a11=this.fontsize*(this.p+yi)/(2*this.p)+2;a12=parseInt(100*(this.p+yi)/(2*this.p))};a13=(this.w-20)*a10+20;a14=(this.h-20)*a10+10;a9s.top=(yi+this.y-a14/2)+"px";a9s.left=(xi+this.x-a13/2)+"px";a9s.width=a13+"px";a9s.fontSize=a11+"px";a9s.zIndex=a12};a8.style.top=this.y+(this.isVertical?this.r:this.p)+this.h/2+6;a8.style.left=this.x-a8.offsetWidth/2;if(this.a1!=this.a2){this.a1=(this.a1>this.a2)?(this.a1-this.pas/this.v):(this.a1+this.pas/this.v);if(Math.abs(this.a1-this.a2)<this.pas/this.v)//Folgende 4 Zeilen ohne Zeilenumbruch und Leerzeichen im Scriptthis.a1=this.a2;setTimeout("eye.muta()",10)}},spinmenuclose:function(){this.pas=2*Math.PI/this.a3;document.write('<div id="controale" style="position:absolute"><button type=""onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()"><<</button> <button type=""onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">>></button></div>');eye.muta()}};//Einzelzeilenfunction getposOffset(what, offsettype)
{
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}
return totaloffset;}
//Darstellung des Menüseye.isVertical = 0;eye.x = 150;eye.y = 0;eye.w = 150;eye.h = 30;eye.r = 100;eye.v = 20;eye.s = 4;//Style des Menüseye.color = '#7C6031'; //Schriftfarbeeye.colorover = '#7C6031'; //Schriftfarbe überfahreneye.backgroundcolor = '#EEF6E9'; //Buttonhintergrundfarbeeye.backgroundcolorover = '#B4DA9F'; //Buttonhintergrundfarbe überfahreneye.bordercolor = '#7C6031'; //Rahmenfarbeeye.fontsize = 16; //Schriftgrößeeye.fontfamily = 'tahoma'; //Schriftartif (document.getElementById){
document.write('<div id="spinanchor" style="height:'+eval(eye.h+20)+'"></div>')eye.anchor=document.getElementById('spinanchor')eye.spinmenu();eye.x+=getposOffset(eye.anchor, "left") //relativ positioniereneye.y+=getposOffset(eye.anchor, "top") //relativ positionieren//Verlinkungen der Menüpunkteeye.spinmenuitem("Zur Startseite","http://x5forum.home-wiekau.de",target="_parent");eye.spinmenuitem("Download Script","http://dl.home-wiekau.de/click.php?id=wsX5Obj13_0",target="_blank");eye.spinmenuitem("Menü 1","#");eye.spinmenuitem("Menü 2","#");eye.spinmenuitem("Menü 3","#");eye.spinmenuitem("Menü 4","#");eye.spinmenuitem("Menü 5","#");eye.spinmenuclose();
}
</script>
</div>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.