HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个好看的圆形径向菜单鸭</title>
</head>
<body>
<h1>一个好看的圆形径向菜单鸭~</h1>
<div class="nav-wrap">
<nav>
<a class="nav-item">1</a>
<a class="nav-item">2</a>
<a class="nav-item">3</a>
<a class="nav-item">4</a>
<a class="nav-item">5</a>
<a class="nav-item">6</a>
<a class="nav-item">7</a>
<a class="nav-item">8</a>
</nav>
<a class="main-nav">点一下</a>
</div>
</body>
</html>
JS实现
需要先引入jquery文件
<script src="http://s0.qhimg.com/lib/jquery/183.js"></script>
当菜单没被激活时
var isLocated = false;
激活菜单
$('.nav-wrap').on('click', '.main-nav', function (e) {
e.preventDefault();
var me = $(this),
navWrap = me.closest('.nav-wrap'), // 动画效果的父容器
navs = navWrap.find('nav a'); // 父容器中的所有子菜单
if (!navWrap.hasClass('active') && !isLocated) {
// 圆的半径 raduis
var width = navWrap.width(),
radius = width / 2;
// 圆形菜单的起始、终止角度
var startAngle = 0,
endAngle = 360;
// 两个子菜单间的夹角 gap
var total = navs.length,
gap = (endAngle - startAngle) / total;
// 角度->弧度
var radian = Math.PI / 180;
/*
* 计算并确定各个子菜单的最终位置
*/
$.each(navs, function (index, item) {
// 当前子菜单与x轴正向的夹角 θ (角度->弧度)
var myAngle = (startAngle + gap * index) * radian; // θ
// 计算当前子菜单相对于左上角(0,0)的坐标 (x,y)
var myX = radius + radius * Math.cos(myAngle), // x=r+rcos(θ)
myY = radius + radius * Math.sin(myAngle); // y=r+rsin(θ)
// 设置当前子菜单的位置 (left,top) = (x,y)
$(this).css({
left: myX + 'px',
top: myY + 'px'
});
});
isLocated = true;
}
navWrap.toggleClass('active');
});
CSS实现
* {
margin: 0;
padding: 0;
}
body {
background-color: #292a38;
font-family: "Microsoft Yahei";
}
h1 {
margin-top: 20px;
text-align: center;
color: #fff;
}
.nav-wrap {
position: relative;
width: 200px;
height: 200px;
margin: 50px auto;
border: 2px dotted #4e5061;
border-radius: 50%;
}
.nav-wrap .main-nav {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
line-height: 40px;
font-size: 12px;
text-align: center;
text-decoration: none;
color: #fff;
border-radius: 3px;
text-shadow: 1px 1px 0px #000;
background: #15a5f3;
cursor: pointer;
}
.nav-wrap nav {
position: absolute;
width: 100%;
height: 100%;
transform: scale(0);
transition: all 0.5s ease-out;
opacity: 0;
}
.nav-wrap.active nav {
transform: scale(1);
opacity: 1;
}
.nav-wrap nav>a {
position: absolute;
width: 30px;
height: 30px;
background: #f44283;
text-align: center;
line-height: 30px;
text-decoration: none;
color: #fff;
border-radius: 3px;
text-shadow: 1px 1px 0px #000;
transform: translate(-50%, -50%);
}
</style>