如何在HTML5和CSS3中创建类似圈子的菜单？

我很困惑，我该如何创建像HTML5/CSS3中的圆圈和子圆圈菜单？如何在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

谁能给我suggetion如何实现这一功能，或者是有任何JavaScript API可用于实现同例1

来源

2013-10-11 Ashwin Parmar

使用'边界radius'在CSS3 –

@TusharGupta我尝试使用CSS来显示/隐藏在家长圈DIV的哈弗简单DIV。但不知道如何在给定的图像显示。 –

我在过去使用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-11 13:45:33 melc

哇！那是我想要的。这太漂亮了。一个问题，如果我使用它并且它是一个开源的依赖项？ –

没有依赖关系和开源，很快就会把它放在github上 – melc

谢谢，我将尝试将这个功能添加到我的网站，我希望它会适合。 –

例子，如何在小提琴创建一个圆：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-11 13:43:55

这也是好的，也谢谢@melc –

我最近碰到这篇文章：

Building a circular navigation with CSS transforms

来源

2013-10-11 13:51:08 enyce12

伟大的动画与圈子。 –

如何在HTML5和CSS3中创建类似圈子的菜单？

回答

相关问题