如何在移动web上用CSS和JavaScript实现半圆菜单（子项）？

当我用右手上网时，我想使用半圆菜单。有人能教我如何在移动web上用CSS和JavaScript实现半圆菜单（子项）吗？我已经用CSS

transform:rotate

和

border radius

尝试过了，但是没有成功

有一个半圆菜单按钮，这个按钮可以打开和关闭菜单。当我点击菜单按钮时，主界面会弹出。然后点击“主1”，弹出子级（子1-1、子1-2、子1-3）

如前所述，当我点击“主6”时，会弹出子级别（子6-1、子6-2、子6-3）

以下是菜单的体系结构：

菜单
主要1
第1-1分段
第1-2分段
第1-3分段
主要2
第2-1分段
第2-2分段
第2-3分段
主要3
第3-1分段
第3-2分段
第3-3分段
主要4
第4-1分段
第4-2分段
第4-3分段
主要5
第5-1分段
第5-2分段
第5-3分段
主要内容6
第6-1分段
第6-2分段
第6-3分段

您必须使用SVG库。尝试使用基本的HTML元素和jQuery使用图像映射可能是可行的，但是围绕jQuery包装它会让你想自杀

---

我推荐使用它，因为它不仅处理演示部分（外观、动画），而且还处理您将提供给它的数据。

您可以使用SVG实现这一点。当您点击

first ring

按钮或（Main 1，Main 2…）时，它将更新

second ring

按钮或（Sub 1，Sub 2 1…）的文本，这仅用于演示目的。您可以使用js更改

内部的链接，而不仅仅是文本

var firstRing=$（'.first-ring'）；
var secondRing=$（'.second ring'）；
var sibles=firstRing.sibles（'.second-ring'）；
var open=$（“#open”）；
打开。单击（函数（）{
firstRing.toggleClass（'show'）；
如果（！firstRing.hasClass（'show'））{
兄弟。removeClass（'show'）；
}
});
firstRing.children（'g'）。单击（函数（）{
var data=$（this.data（'url'）；
兄弟.addClass（'show'）；
secondRing.children（'g'）。children（'a'）。children（'text'）。each（function（）{
var text=$（this.text（）.split（“”）；
$（this）.text（文本[0]+''+数据+''+文本[2]）；
});
});
svg{
位置：固定；
最高：50%；
右：0；
转化：translateY（-50%）；
字体大小：12px；
}
g{
填充物：白色；
过渡：所有0.3秒都容易进入；
光标：指针；
}
正文{
填充物：白色；
}
g:不（.第一环）：不（.第二环）：悬停{
不透明度：0.6；
}
.第一环，.第二环{
不透明度：0；
}
.表演{
不透明度：1；
}
.main{fill:#2b2b；}
.1{fill:#2b2b；}
.two{fill:#3737；}
.3{填写：#444444；}
.four{fill:#515151；}
.five{fill:#5e5e；}
.six{fill:#6a6a；}
.sub-one{fill:#777777；}
.sub-two{fill:#848484；}
.sub-three{fill:#909090；}

菜单
主要1
主要2
主要3
缅因州4
主要5
主要内容6

没有SVG，只是简单的css

基本上


只需在同一个角上以增加的角度旋转矩形。像个纸扇
将最外层的整个东西放在一个圆圈中（
边框半径：rpx；溢出：隐藏
）
对任何其他外圈重复上述步骤
添加另一个外部
溢出：隐藏的
包装，如果放大的最后一个菜单（“菜单5”）困扰您

Javascript是唯一需要的，只要你处理点击，并希望切换子选项的外圈可见性

➪ 

这是简化的手写笔语法（类似于less，sass），请参见代码笔➝‘完整css的“已编译视图”：

li
  position absolute
  top 50%
  display block
  transform-origin top right
  overflow hidden
  width r
  height r

li:nth-of-type(1)
  transform: rotate(60deg)
  background #000
li:nth-of-type(2)
  transform: rotate(40deg)
  background #222
..

“jQuery会让你想自杀”这句话是当今的流行语！！很难调试，开销巨大，等等。这不值得！tympanus.net中有一个半圆菜单的详细示例。它通过图像一步一步地解释如何构建效果。复制：