如何在像HTML圈子的HTML5和CSS3中创建菜单？

Question

我很困惑,我怎样才能在HTML5/CSS3中创建像圆圈和子圈这样的菜单？

说明:

<ul>
    <li>Circle-1
        <ul>
            <li>Circle-1.1</li>
            <li>Circle-1.2</li>
            <li>Circle-1.3</li>
            <li>Circle-1.4</li>
        </ul>
    </li>
    <li>Circle-2
        <ul>
            <li>Circle-2.1</li>
            <li>Circle-2.2</li>
            <li>Circle-2.3</li>
            <li>Circle-2.4</li>
        </ul>
    </li>
    <li>Circle-3</li>
    <li>Circle-4</li>
</ul>

这是我的Parent Circle和Child Circle的层次结构.

我想创建菜单,比如当我点击每个圆圈它应该显示其他子菜单选项作为连接圆圈.

例1

任何人都可以给我建议如何实现此功能或是否有任何Javascript API可用于实现与示例1相同

Answer 1

我在过去使用jquery创建了一个类似的实现,你可能会发现它很有用.它可以用作jquery插件,

jQuery(document).ready(function () {
    jQuery('.menu').roundMenu({
        /*
        menuSize: "50px",
        optionSize: "30px",
        distance: "70px",
        span: "180",
        offset: "0",
        isMenuRound: true,
        isOptionsRound: true,
        animate:true,
        onShow:function(i){alert("showed :"+i);},
        onHide:function(i){alert("hidden :"+i);}*/

    });

还有一个小提琴, http://jsfiddle.net/melc/Qv6Y6/

也用子菜单测试它,它的工作原理(小提琴 - http://jsfiddle.net/rX8fJ/)

遗憾的是没有太多的文件,但试图发现它的使用方式,它有一些道具