环形菜单的实现

一个前端小白，本来是设计出身，耐何初入职场时合作的都是一些小型企业，技术人才配备不全，所以工作之余自己学习了前端的知识，慢慢的发现自己还有些小兴趣，所以现在公司里的设计和前端的工作都是我在负责。

平时领导要求也是五花八门，所以为了让自己有点存在感，平时就只有自己钻研前端知识，现在马马虎虎能实现一些很小的效果，虽然相比那些技术大牛只是冰山一角，但对于我自身而言， 每一个小小的进步都是值得庆贺的。

这是一个圆形菜单的展示效果，由于对JS掌握不透，对于动态灵活的展现还不能实现，只能是固定的菜单个数的展示，将就用着吧先！

HTML代码部分：

<div class="cnav">
    <div class="cnav-center">项目</div>
    <div class="cnav-space1" ></div>
    <div class="cnav-l">
        <div class="cnav-l-one"><a href="#"><span>客户</span></a> </div>
        <div class="cnav-l-one"><a href="#"><span>基金</span></a></div>
    </div>
    <div class="cnav-space2"></div>
    <div class="cnav-r csubnav-1">
        <div class="cnav-r-one">
            <a href="#"><span>立项</span></a>
        </div>
        <div class="cnav-r-one"><a href="#"><span>尽调</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>内审</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>投决</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>投资</span></a></div>
        
    </div>
    <div class="cnav-r csubnav-2">
        <div class="cnav-r-one">
            <a href="#"><span>客户</span></a>
        </div>
        <div class="cnav-r-one"><a href="#"><span>客户</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>客户</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>客户</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>客户</span></a></div>
        
    </div>
    <div class="cnav-r csubnav-3">
        <div class="cnav-r-one">
            <a href="#"><span>基金</span></a>
        </div>
        <div class="cnav-r-one"><a href="#"><span>基金</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>基金</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>基金</span></a></div>
        <div class="cnav-r-one"><a href="#"><span>基金</span></a></div>
        
    </div>
</div>

CSS部分：

<style type="text/css">
*{ margin:0; padding:0; font-family:微软雅黑;}
.cnav{ width:1px; height:1px; overflow:visible; position:relative; color:#ff; margin:160px auto;}
.cnav-center{ position:absolute; left:-90px; top:-90px; width:180px; height:180px; background:#0097d4; border-radius:50%; overflow:hidden; font-size:2em; text-align:center; line-height:170px; cursor:pointer; color:#fff; z-index:90; border:5px solid #fff; box-sizing:border-box;}

.cnav-l{ width:150px; height:300px;overflow:hidden;  border-radius:150px 0 0 150px; position:absolute; left:-150px; top:-150px; z-index:80;}
.cnav-l-one{ width:150px; height:150px; position:absolute; right:0; top:0; transform-origin:150px 150px; background:#0097d4; color:#fff; border:1px solid #fff; box-sizing:border-box; }
.cnav-l-one:nth-child(1){transform:rotate(-0deg) skewX(40deg) ; }
.cnav-l-one:nth-child(2){transform:rotate(-50deg) skewX(40deg);}
.cnav-l-one a{ transform-origin:100% 100%; display:block; width:120px; height:10px; position:absolute; right:0;  bottom:-10px; line-height:30px;transform:skewX(-40deg) rotate(20deg); transform-origin:100% 10px;  color:#fff; line-height:20px; text-decoration:none;}
.cnav-l-one a span{ display:block; width:60px; height:40px; position:absolute;left:-30px; top:-25px; text-align:center; transform:rotate(-90deg);cursor:pointer; }

.cnav-r{ width:300px; height:300px;overflow:hidden; transform:rotate(0deg); opacity:0;  border-radius:50%; position:absolute; left:-150px; top:-150px; z-index:50; transition:all ease-in-out 0.5s;}

.cnav-r-one{ width:300px; height:300px; position:absolute; top:-150px; left:-150px; transform-origin:300px 300px; background:#0097d4; color:#fff; border:1px solid #fff; box-sizing:border-box; }
.cnav-r-one:nth-child(1){transform:rotate(0deg) skewX(55deg) ; background:#e83828; }
.cnav-r-one:nth-child(2){transform:rotate(35deg) skewX(55deg); background:#f39800;}
.cnav-r-one:nth-child(3){transform:rotate(70deg) skewX(55deg); background:#f8b62d;}
.cnav-r-one:nth-child(4){transform:rotate(105deg) skewX(55deg); background:#dae000;}
.cnav-r-one:nth-child(5){transform:rotate(140deg) skewX(55deg); background:#8fc31f;}
.cnav-r-one a{ transform-origin:100% 100%; display:block; width:130px; height:10px; position:absolute; right:0; bottom:-10px; line-height:30px;transform:skewX(-55deg) rotate(20deg); text-align:center; transform-origin:100% 10px;  color:#fff; line-height:20px; text-decoration:none;}
.cnav-r-one a span{ display:block; text-align:center; width:60px; height:40px; position:absolute; left:-30px; top:-10px; transform:rotate(-90deg); overflow:visible; cursor:pointer;}

.cnav-space2{ width:200px; height:200px; position:absolute; left:-100px; top:-100px; border-radius:50%; overflow:hidden; z-index:60; background:rgba(255,255,255,1);}
.csubnav-1{ opacity:1; transform:rotate(90deg); z-index:51;}
.rotate0{ transform:rotate(-9deg); opacity:0; z-index:50;}
.rotate{ transform:rotate(90deg); opacity:1; z-index:51;}
</style>

JS部分：

<script>
$(function(){
    $('.cnav-l .cnav-l-one').click(function(){
        if($(this).find('span').text()=='项目'){
            $('.csubnav-2').removeClass('rotate')
            $('.csubnav-2').addClass('rotate0')
            $('.csubnav-3').removeClass('rotate')
            $('.csubnav-3').addClass('rotate0')
            $('.csubnav-1').removeClass('rotate0')
            $('.csubnav-1').addClass('rotate')
        }else if($(this).find('span').text()=='客户'){
            $('.csubnav-1').removeClass('rotate')
            $('.csubnav-1').addClass('rotate0')
            $('.csubnav-3').removeClass('rotate')
            $('.csubnav-3').addClass('rotate0')
            $('.csubnav-2').removeClass('rotate0')
            $('.csubnav-2').addClass('rotate')
                
        
        }else if($(this).find('span').text()=='基金'){
            $('.csubnav-1').removeClass('rotate')
            $('.csubnav-1').addClass('rotate0')
            $('.csubnav-2').removeClass('rotate')
            $('.csubnav-2').addClass('rotate0')
            $('.csubnav-3').removeClass('rotate0')
            $('.csubnav-3').addClass('rotate')
        }
        var $cnavCenter=$('.cnav-center').text();
        $('.cnav-center').css({'background':'#008ac2'})
        $('.cnav-center').text($(this).find('span').text())
        $(this).find('span').text($cnavCenter)
        
        })
        $('.cnav-r-one').click(function(){
            $('.cnav-r-one').find('span').css({'color':'#fff','font-weight':'normal'})        
                $(this).find('span').css({'color':'#000','font-weight':'bold'})    
            
            
        })
    })
</script>

最终效果：