CSS3学习笔记之径向展开菜单

<div class="menu-wrap">
<nav>
<a href="" class="nav-item">1</a>
<a href="" class="nav-item">2</a>
<a href="" class="nav-item">3</a>
<a href="" class="nav-item">4</a>
<a href="" class="nav-item">5</a>
<a href="" class="nav-item">6</a>
<a href="" class="nav-item">7</a>
<a href="" class="nav-item">8</a>
</nav>
<a href="##" class="btn">展开</a>
</div>

*{ padding: 0; margin:0; }
body{ background-color: #333; }
a{ text-decoration:none; }
/*外部容器样式*/
.menu-wrap{
width: 200px; height: 200px; border-radius: 100%; margin:60px auto; position: relative;
}
/*导航样式*/
.menu-wrap nav{
width: 100%; height: 100%; position: absolute; opacity: 0; z-index: 2; transform: scale(0);
transition: all 1s ease;
}
/*菜单展开时样式*/
.menu-wrap .active{
opacity: 1; transform: scale(1);
}
/*菜单内容项样式*/
.menu-wrap nav .nav-item{
border-radius: 100%; position: absolute; display: block; width: 30px; height: 30px;
text-align: center; line-height: 30px; background-color: yellow; color: #333;
}
/*中间展开/收缩按钮样式*/
.menu-wrap .btn{
background-color: #15c2cf; border-radius: 100%; display: block; color: #fff; width: 60px;
height: 60px; line-height: 60px; text-align: center; position: absolute; left: 50%; top: 50%;
margin-left:-30px; margin-top: -30px; z-index: 3; border:solid 1px #000;
}

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$(".btn").click(function(){
// 判断展开/收缩状态
if(!$("nav").hasClass("active")){

$(".btn").text("收缩");
$("nav").addClass("active");

var r=$(".menu-wrap").width()/2; //定义圆的半径
var startAngel=0,
endAngel=360;//设置起始、结束度数
var total=$(".nav-item").length,//获取子内容项个数
gap=(endAngel-startAngel)/total;//设置夹角

$(".nav-item").each(function(index){
var curAngel=startAngel+gap*index*(Math.PI/180);//js中需要把角度转换为弧度
$(this).css({
left:Math.cos(curAngel)*r+r-$(this).width()/2,
top:Math.sin(curAngel)*r+r-$(this).width()/2
})
})
}else{
$("nav").removeClass("active");
$(".btn").text("展开");
}
})
})
</script>