Spin Menü - Website X5 Hilfe - Die Helpsite

Logo Schriftzug
Logo WSX5
Newsletter anmelden
Scan QR or Download Android App
Direkt zum Seiteninhalt

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.
Download Button
x runter geladen!
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 Script
eye={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 Script
this.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()}};
//Einzelzeilen
function 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üs
eye.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üs
eye.color = '#7C6031';               //Schriftfarbe
eye.colorover = '#7C6031';           //Schriftfarbe überfahren
eye.backgroundcolor = '#EEF6E9';     //Buttonhintergrundfarbe
eye.backgroundcolorover = '#B4DA9F'; //Buttonhintergrundfarbe überfahren
eye.bordercolor = '#7C6031';         //Rahmenfarbe
eye.fontsize = 16;                   //Schriftgröße
eye.fontfamily = 'tahoma';           //Schriftart
if (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 positionieren
eye.y+=getposOffset(eye.anchor, "top")  //relativ positionieren
//Verlinkungen der Menüpunkte
eye.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&uuml; 1","#");
eye.spinmenuitem("Men&uuml; 2","#");
eye.spinmenuitem("Men&uuml; 3","#");
eye.spinmenuitem("Men&uuml; 4","#");
eye.spinmenuitem("Men&uuml; 5","#");
eye.spinmenuclose();
}
</script>
</div>
Feedbacks zu ""
Kein Kommentar
Vielen Dank für Dein Feedback.
HTML5
Button Spenden

© 2009 - 2019





Besucher Statistik
» 1 Online
» 43 Heute
» 158 Gestern
» 201 Woche
» 3810 Monat
» 127180 Jahr
» 454936 Gesamt
Record: 2382 (29.03.2019)
Gesamt Downloads:
Zurück zum Seiteninhalt