<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:; margin:; }

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:; z-index:; transform: scale(0);

    transition: all 1s ease;

}

/*菜单展开时样式*/

.menu-wrap .active{

    opacity:; 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:; 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>