<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>径向动画菜单</title>
<style>
*{margin: 0;padding: 0;}
body{background: #292a38;font-family: 'Arial Negreta', 'Arial','微软雅黑';}
.nav-wrap{position: relative;width: 400px;height: 400px;margin: 120px auto 20px;border: 2px dotted #4e5061;border-radius:100%;}
.nav-wrap .main-nav{position: absolute;left: 50%;top: 50%;text-align: center;text-decoration: none;color: #fff;border-radius: 3px;text-shadow: 1px 1px 0px #000;background: #15a5f3;font-size: 12px;height: 40px;line-height: 40px;cursor: pointer;transform: translate(-50%,-50%);padding:0 5px;}
.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{display:inline-block;position: absolute;height: 30px;background: #f44283;text-align: center;line-height: 30px;text-decoration: none;color: #fff;border-radius: 3px;padding:0 5px;}
</style>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(".main-nav").click(function(){
if(!$(".nav-wrap").hasClass('active')){
//圆的半径
var width=$(".nav-wrap").width(),
radius=width/2;
//圆形的起始终止角度
var startAngle=0,
endAngle=360;
//两个子菜单的夹角
var total=$(".nav-wrap nav").find("a").size(),
gap=(endAngle-startAngle)/total;
$(".nav-wrap nav").find("a").each(function(index, el) {
var myAngle=(startAngle+gap*index)*(Math.PI/180);
var myX=radius+radius*Math.cos(myAngle),
myY=radius+radius*Math.sin(myAngle);
$(this).css({
left: myX-$(this).width()/2+'px',
top: myY-$(this).height()/2+'px'
});
});
}
$(".nav-wrap").toggleClass('active');
})
})
</script>
</head>
<body>
<div class="nav-wrap">
<nav>
<a class="nav-item1">javaScript</a>
<a class="nav-item2">html</a>
<a class="nav-item3">css</a>
<a class="nav-item4">AJAX</a>
<a class="nav-item1">jQuery</a>
<a class="nav-item2">sass</a>
<a class="nav-item3">Bootstrap</a>
<a class="nav-item4">ps</a>
</nav>
<a class="main-nav">web前端必备技能</a>
</div>
</body>
</html>点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦