响应六角菜单

Question

我正在尝试为移动应用实现Hexagon菜单。最终结果是

我的尝试是JSFiddle。

我现在面临的问题是：

1. 如何使Hexagon菜单响应，使其始终位于加载应用程序的屏幕中心？
2. 我想在用户点击按钮后将菜单激活按钮（从jsfiddle引用id='menucirclebutton'）移动到六边形菜单的中心。现在，我添加了一个班级menu-button-move。无论屏幕大小如何，如何使菜单激活按钮位于六边形菜单的中央？
3. 如何实现在激活时按菜单按钮缩放的六边形轮廓？

Answer 1

要使页面上的菜单居中，请参阅：https://css-tricks.com/centering-css-complete-guide/

对于六边形菜单，这是我想到的一种方法：

1. 居中所有菜单项。 position: absolute。
2. transform: translate每个项目相对于中心。
3. 对于大纲，请为每个项目rotate创建一个伪元素，并相应地设置transform-origin。