径向菜单（慕课学习结果）-原创手记-慕课网

<!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 src="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>
径向菜单 （慕课学习结果）

径向菜单（慕课学习结果）
