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 enter image description here

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

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

我最近遇到过这篇文章：

Building a circular navigation with CSS transforms

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>

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

3 个答案: