奇幻布局~圆形多级菜单

奇幻布局~圆形多级菜单_第1张图片

效果展示

设计稿部分内容脱敏处理

奇幻布局~圆形多级菜单_第2张图片

Step1:思考内容布局

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

页面内容代码如下:

奇幻布局~圆形多级菜单_第3张图片

Step2:编写样式代码

  • 采用定位进行布局,定位相对点【 元素定位得位置以元素左上角顶点为起始点 】
  • 由于菜单呈圆形,且子级菜单节点循环生成,因此在 一个圆内可以做到统一均分的是角度 ,因此思路是通过定位子级菜单到合适距离后,根据子级菜单节点Index索引来进行旋转
  • 特殊情况:当子级菜单节点只有4个的时候,需要让第一个菜单节点旋转45度后,再均分呈现[90度],其余情况则不变,完全均分显示

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

奇幻布局~圆形多级菜单_第4张图片


相关内容更新至公众号:ISAS 前端G
欢迎关注~
如有不当之处,请联系我

你可能感兴趣的:(html5css前端css3)