如何在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中創建類似圈子的菜單？

回答

相關問題