javascript - Circular menu's alignment changes when I click on the button second time -

i'm making circular menu opens when click button. when click button again, alignment changes.

clicking user button first time:

clicking user button second time:

i tried upload on jsfiddle, circle not appearing there. sorry that!

here code:

html

<a class=" glyphicon glyphicon-user" href="#" style=";font-size: 36px;color: white;padding: 10px;padding-right: 20px;" id="open" onclick="make()"></a> <div id='piemenu' data-wheelnav data-wheelnav-slicepath='pieslice' data-wheelnav-spreader data-wheelnav-spreaderpath='piespreader' data-wheelnav-marker data-wheelnav-markerpath='pielinemarker' data-wheelnav-rotateoff data-wheelnav-navangle='167.14285714285714' data-wheelnav-titleheight='25.714285714285715' data-wheelnav-cssmode data-wheelnav-init>   <div data-wheelnav-navitemicon='?' style="font-size:50px;" onmouseup='alert("place logic here.");'></div>   <div data-wheelnav-navitemicon='slideshare' style="font-size:50px;" onmouseup='alert("place logic here.");'></div>   <div data-wheelnav-navitemicon='pen' style="font-size:50px;" onmouseup='alert("place logic here.");'></div>   <div data-wheelnav-navitemicon='key' onmouseup='alert("place logic here.");'></div>   <div data-wheelnav-navitemicon='gear' class=" glyphicon glyphicon-asterisk" style="font-size:50px;" onmouseup='alert("place logic here.");'></div>   <div data-wheelnav-navitemicon='disconnect' style="font-size:50px;" onmouseup='alert("place logic here.");'>     <a class=" glyphicon glyphicon-log-out"></a>   </div>   <div data-wheelnav-navitemicon='' style="font-size:50px;" onmouseup='alert("place logic here.");'></div> </div> 

javascript:

var = 0;  function make() {   var piemenu = new wheelnav('piemenu');;   piemenu.spreaderintitle = icon.plus;   piemenu.spreaderouttitle = icon.cross;   piemenu.spreaderradius = piemenu.wheelradius * 0.13;   piemenu.clockwise = false;   piemenu.sliceinitpathfunction = piemenu.slicepathfunction;   piemenu.initpercent = 0.1;   piemenu.wheelradius = piemenu.wheelradius * 0.83;   piemenu.navitemscontinuous = true;   piemenu.sliceangle = 25.714285714285715;   piemenu.createwheel();   piemenu.settooltips(['help', 'friend           request ','         create ','         privacy ','         settings ','         signout ','         download ']); } 

css:

#piemenu > svg {   width: 100%;   height: 100%; }  #piemenu {   height: 400px;   width: 400px;   float: right;   margin-right: -5%;   top: -103px;   position: relative; }  @media (max-width: 400px) {   #piemenu {     height: 300px;     width: 300px;   } }  [class|=wheelnav-piemenu-slice-basic] {   fill: #497f4c;   stroke: none; }  [class|=wheelnav-piemenu-slice-selected] {   fill: #497f4c;   stroke: none; }  [class|=wheelnav-piemenu-slice-hover] {   fill: #497f4c;   stroke: none;   fill-opacity: 0.77;   cursor: pointer; }  [class|=wheelnav-piemenu-title-basic] {   fill: #333;   stroke: none; }  [class|=wheelnav-piemenu-title-selected] {   fill: #fff;   stroke: none; }  [class|=wheelnav-piemenu-title-hover] {   fill: #222;   stroke: none;   cursor: pointer; }  .wheelnav-piemenu-spreader-in, .wheelnav-piemenu-spreader-out {   fill: #444;   stroke: #444;   stroke - width: 2;   cursor: pointer; }  .wheelnav-piemenu-spreadertitle-in, .wheelnav-piemenu-spreadertitle-out {   fill: #eee;   stroke: #444;   cursor: pointer; }  .wheelnav-piemenu-marker {   stroke: #444;   stroke-width: 2; }