چند روز پیش به درخواست یکی از دوستان یک منوی با جی کوئری درست کردم که با کلیک روی دکمه خاص گزینه های منو بصورت دایره ای و با انیمیشن باز می شوند. حدود 60 روزی هم هست که چندی از نویسندگان نارنجی دستگیر شدند و هنوز هیچ اطلاعی از وضعیت اونها در دست نیست، این شد که منویی که درست کردم را کمی تغییر داده و بهتر کردم و به افتخار نارنجی ، نارنجی صداش می کنم، به امید اینکه هرچه سریع تر این نویسندگان خوبمون برگردن سر کارشون و البته همه اونایی که الان به شکلهای مشابه از زندگی خودشون دور هستند

HTML

```
<h3>CSS</h3>

body{
margin:0;
background: #fc0;
}
.circle-menu {
position:fixed;
top:0;
left:0;
list-style-type: none;
margin: 0;
padding: 0;
text-align:center;
}
.circle-menu li.first a {
font-size: 30px;
color: #fc0;
line-height: 140px;
border-radius: 0 100% 100% 100%;
position:initial;
margin:0 auto;
text-shadow: 1px 1px 4px #ddd;
}
.circle-menu li.first {
z-index:100;
background: #fff;
width:140px;
height: 140px;
border-radius: 0 100% 100% 100%;
}
.circle-menu li{
display:block;
border-radius: 100%;
width:140px;
hright:140px;
position:absolute;
top:0;
left:0;
}
.circle-menu li a {
font-family: Tahoma, sans-serif;
text-decoration: none;
color: #222;
position: absolute;
bottom: 10px;
width:100px;
left: calc(50% - 50px);
}

<h3>jQuery</h3>

var height = 60;
$('.circle-menu li.first').click(function(e){
e.preventDefault();
if($( this ).parent().is( ".hide" )) {
var dif = height;
var cur = 140;
var f = 0.1;
$('.circle-menu li').not('.first')
.each(function(i){
$(this).delay(100*i)
.css('background', ColorLuminance('#fc0', f))
.css('margin-top', '-'+(dif/2)+'px')
.css('margin-left', '-'+(dif/2)+'px')
.css('z-index', -(10+(dif/height))).animate({
width: (cur+dif)+'px',
height: (cur+dif)+'px',
},1000 , function(){

  });
  dif+= height;
  f-= 0.05;
});

} else {
$('.circle-menu li').not('.first').each(function(){
$(this).animate({
width: '50px',
height: '50px',
},50 , function(){
});
});
}
$( '.circle-menu').toggleClass('hide');
});

// make color darker/lighter
function ColorLuminance(hex, lum) {

// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
	hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;

// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
	c = parseInt(hex.substr(i*2,2), 16);
	c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
	rgb += ("00"+c).substr(c.length);
}

return rgb;

}


<p data-height="331" data-theme-id="1094" data-slug-hash="otLev" data-default-tab="result" class='codepen'>See the Pen <a href='http://codepen.io/farnabaz/pen/otLev'>Circular Menu using jquery</a> by Ahad Birang (<a href='http://codepen.io/farnabaz'>@farnabaz</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//codepen.io/content/images/hexo/embed/ei.js"></script>