如何仅使用 CSS 创建径向菜单？

如何使用 CSS 创建径向菜单？

问题：

如何创建一个看起来像这样的菜单：

[图片]

我不想使用 PSD 图像。我宁愿使用来自 FontAwesome 等包中的图标，并在 CSS 中生成背景/CSS。

可以使用 PSD 创建的菜单版本可以在这里找到。

答案：

经过将近 3 年的等待，我终于有时间重新审视此问题并发布改进版本。您仍然可以在结尾处查看原始答案以供参考。

虽然 SVG 可能是一个更好的选择（尤其是在今天），但我的目标是只使用 HTML 和 CSS，没有 JS、没有 SVG、没有图像（根元素上的背景除外）。

2015 年演示

屏幕截图：

• Chrome 43：

[图片]

• Firefox 38：

[图片]

• IE 11：

[图片]

代码

HTML 相当简单。我正在使用复选框技巧来显示/隐藏菜单。

<input type="checkbox">

我使用 Sass 来保持逻辑并且如果需要，可以更轻松地更改内容。大量注释。

/* CSS goes here. */

目前，此答案涵盖了 HTML、Sass 和原始 JavaScript。这是一个大型响应，因为它深入探讨了解决方案并提供了有用的代码示例。

以上是如何仅使用 CSS 创建径向菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！