如何在HTML5和CSS3（如Circles）中創建菜單？

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>

這是我的“父圈子”和“子圈子”的層次結構。

我想創建菜單，就像當我單擊每個圓時一樣。應該將其他子菜單選項顯示為已連接圓。

例子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/ ）

不幸的是，沒有多少文檔資料，但是嘗試發現它的使用方式，它有一些道具

Answer 2

我最近遇到了這篇文章：

使用CSS變換構建圓形導航

Answer 3

示例如何在小提琴中創建圓圈： http : //jsfiddle.net/BQKSc/

的CSS

div {
    width: 10em;
    height: 10em;
    -webkit-border-radius: 5em;
    -moz-border-radius: 5em;
    border:5px solid red;
}
p {
    text-align: center;
    margin-top: 4.5em;
}

的HTML

<div><p>CIRCLE</p></div>