3D Spin Menu in Asp.Net

 

Description:-

In this article we will see about how to create 3D spin menu in asp.net. here I have create 3D-Spin menu using JavaScript and JQuery to Spin what we Create Menu in JavaScript it will Rotate in 3D in our webpage.

Download JQuery File:- JQuery.min.js

HTML Code:-

<div style="font-family: Palatino Linotype; font-size: 45px; font-weight: bold; text-align: center;
margin: 15px; margin-top: 165px; margin-bottom: 150px;">
</div>

JavaScript Code:-

<script type="text/javascript">
eye.isVertical = 0; //if it's vertical or horizontal [0|1]
eye.x = 250; // x offset from point of insertion on page
eye.y = 100; // y offset from point of insertion on page
eye.w = 180; // item's width
eye.h = 20; // height
eye.r = 180; // menu's radius
eye.v = 50; // velocity
eye.s = 5; // scale in space (for 3D effect)
eye.color = '#D4E6F0'; // normal text color
eye.colorover = '#D4E6F0'; // mouseover text color
eye.backgroundcolor = '#3B8DBD'; // normal background color
eye.backgroundcolorover = '#3B8DBD'; // mouseover background color
eye.bordercolor = '#0D525C'; //border color
eye.fontsize = 11; // font size
eye.fontfamily = 'verdana'; //font family

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") //relatively position it
eye.y += getposOffset(eye.anchor, "top")  //relatively position it
//menuitem:   eye.spinmenuitem(text, link, target)
eye.spinmenuitem("ASPCODDER", "https://aspcodder.blogspot.in");
eye.spinmenuitem("ASP.NET", "https://aspcodder.blogspot.in/search/label/Asp.Net");
eye.spinmenuitem("HTML", "https://aspcodder.blogspot.in/search/label/HTML");
eye.spinmenuitem("CSS", "https://aspcodder.blogspot.in/search/label/CSS");
eye.spinmenuitem("Dynamics Ax", "https://aspcodder.blogspot.in/search/label/Dynamics%20AX");
eye.spinmenuitem("XML", "https://aspcodder.blogspot.in/search/label/XML");
eye.spinmenuitem("Ajax Control", "https://aspcodder.blogspot.in/search/label/AjaxControl");
eye.spinmenuitem("Java Script", "https://aspcodder.blogspot.in/search/label/Java%20Script");
eye.spinmenuitem("SQL Server", "https://aspcodder.blogspot.in/search/label/SQL");
eye.spinmenuclose();
}       
</script>

JQuery Code:-

I’m Using Following JQuery to Spin Menu in Webpage.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="spinmenu.js" type="text/javascript"></script>

 Spinmenu.js Code:-

//EYEspin_dhtml (c) Petre Stefan
//email: eyecon@eyecon.ro
//website: www.eyecon.ro
//Modified by JavaScriptKit.com for relative positioning of menu
//please leave this copyright notice intact

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:'#ffffff',colorover:'#ffffff',backgroundcolor:'#0099ff',backgroundcolorover:'#000000',bordercolor:'#000000',fontsize:12,fontfamily:'Arial',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='padding:5px; cursor:pointer;cursor:expression(\"hand\");position:absolute;width:"+this.w+"px;left:"+this.h+"px;"+"background-color:"+this.backgroundcolor+";color:"+this.color+";border:1px solid "+this.bordercolor+";font:normal "+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)
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; margin-left:157px;"><button style="width:100px;position:relative;top:30px;left:-10px;background-color:#F6B251;border-style:solid;border-width:1px;border-color:#98C4DB;cursor:pointer" type="" onclick="eye.a2+=eye.pas;eye.muta()" onfocus="this.blur()">&lt;&lt;</button><button type="" style="cursor:hand;width:100px;position:relative;top:30px;left:-10px;background-color:#F6B251;border-style:solid;border-width:1px;border-color:#98C4DB;cursor:pointer;"  onclick="eye.a2-=eye.pas;eye.muta()" onfocus="this.blur()">&gt;&gt;</button></div>'); eye.muta() }
};

functiongetposOffset(what, offsettype){vartotaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;varparentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft :totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}returntotaloffset;
}

Author : Umesh Patel

Related Posts