我也做了一个1/4圆形菜单

效果如图
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
ul,li { list-style:none;}
.footer { width:50px; height:50px; position:absolute; right:5px; bottom:5px;}
.footer h3 { width:100%; height:100%; border-radius:50%; background-color:#03C; color:#fff; position:absolute; cursor:pointer; text-align:center; font-size:12px; line-height:50px; z-index:10;}
.footer  ul { width:100%; height:100%; -webkit-transform:translate(,)}
.footer  ul li { position:absolute; width:100%; height:100%; border-radius:50%; background-color:#888; color:#fff; -webkit-transition:all .5s linear 0s;text-align:center; font-size:12px; line-height:50px; } 
</style>
</head>

<body>
<div class="footer">
    <h3>click</h3>
  <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    
  </ul>
</div>

<script>
var  ul = document.getElementById("list");
var  li =  ul.getElementsByTagName("li");
var radiu = 220;
var arr = [],kai = false ;


function execute (){
    
    for (var i=0; i<li.length;i++){
    
    if(kai){
        li[i].style.webkitTransform = "translate(0px,0px)"
        
    }else {
    
    li[i].style.webkitTransform = "translate("+arr[i].x+","+arr[i].y+")"}
        
        
    }
    kai = !kai ;
}
function nav (x,y){
    this.x = x ;
    this.y = y ;
    }
but = document.querySelectorAll(".footer h3")[0];
but.addEventListener("click",execute);
+function (){
    for (var i=0; i<li.length;i++){
        var oneAngle = 90/(li.length) ;
        var angle =  (oneAngle*i+oneAngle/2) *Math.PI/180;
        var x = -radiu*Math.cos(angle)+"px";
        var y = -radiu* Math.sin(angle)+"px";
        var el = new nav(x,y);
        arr.push(el);
        li[i].style.transitionDelay=li[i].style.webkitTransitionDelay=li[i].style.mozTransitionDelay=li[i].style.msTransitionDelay=li[i].style.oTransitionDelay=(i*50)+"ms"; 
        
    }
}();
</script>
</body>
</html>