Fatal编程技术网

Javascript 响应六边形菜单

javascript html css angularjs

Javascript 响应六边形菜单,javascript,html,css,angularjs,css-shapes,Javascript,Html,Css,Angularjs,Css Shapes,我正在尝试为移动应用程序实现一个六边形菜单。最终结果是 我的尝试是在 我现在面临的问题是： 如何使Hexagon菜单具有响应性，使其始终位于加载应用程序的屏幕中心 我想在用户单击按钮后，将菜单激活按钮（从jsfiddle中引用id='menucirclebutton'）移动到hexagon菜单的中心。现在，我添加了一个类菜单按钮move。如何使菜单激活按钮位于hexagon菜单的正中央，而不考虑屏幕大小 如何实现激活时随菜单按钮缩放的六边形轮廓 有关将菜单置于页面中心的信息，请参见： 对于he

我正在尝试为移动应用程序实现一个六边形菜单。最终结果是

我的尝试是在

我现在面临的问题是：

  • 如何使Hexagon菜单具有响应性，使其始终位于加载应用程序的屏幕中心
  • 我想在用户单击按钮后，将菜单激活按钮（从jsfiddle中引用
    id='menucirclebutton'
    ）移动到hexagon菜单的中心。现在，我添加了一个类
    菜单按钮move
    。如何使菜单激活按钮位于hexagon菜单的正中央，而不考虑屏幕大小
  • 如何实现激活时随菜单按钮缩放的六边形轮廓
    • 有关将菜单置于页面中心的信息，请参见：

    对于hexagon菜单，我想到了一种方法：

  • 将所有菜单项居中<代码>位置：绝对值
  • 变换：相对于中心平移每个项目
  • 对于轮廓，为每个项目创建一个伪元素，
    rotate
    并相应地设置
    transform origin
    • +问题标签上的角度可能会有帮助。使用svg时，这不是更有效吗？@JohnKeates Yes！这会更有效，但我不知道如何使用SVG完成这项工作。