1

我很困惑如何在 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 相同的功能

4

3 回答 3

5

我过去使用 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/）

不幸的是，没有太多的文档，但尝试发现它的使用方式，它有一些道具

于 2013-10-11T13:45:33.960 回答
2

最近看到这篇文章：

使用 CSS 转换构建圆形导航

于 2013-10-11T13:51:08.107 回答
1

例如如何在小提琴中创建一个圆圈：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>
于 2013-10-11T13:43:55.717 回答