关于html5:奇幻布局圆形多级菜单

6次阅读

共计 320 个字符,预计需要花费 1 分钟才能阅读完成。

成果展现

设计稿局部内容脱敏解决

Step1:思考内容布局

圆形菜单的内容由配置生成,数量不固定,菜单为树形格局数据,因而应用循环插入生成节点

页面内容代码如下:

Step2:编写款式代码

  • 采纳定位进行布局,定位绝对点【元素定位得地位以元素左上角顶点为起始点】
  • 因为菜单呈圆形,且子级菜单节点循环生成,因而在 一个圆内能够做到对立均分的是角度,因而思路是通过定位子级菜单到适合间隔后,依据子级菜单节点 Index 索引来进行旋转
  • 非凡状况:当子级菜单节点只有 4 个的时候,须要让第一个菜单节点旋转 45 度后,再均分出现 [90 度],其余状况则不变,齐全均分显示

菜单节点旋转角度计算 && 节点内容角度计算


相干内容更新至公众号:ISAS 前端 G
欢送关注~
如有不当之处,请分割我

正文完
 0