时间戳

首页 > 解决方案 > 弯曲菜单响应可能吗？

javascript - 弯曲菜单响应可能吗？

问题描述

客户希望在他的网站中重新设计他的旧菜单，我应该为他制作。它看起来像这样：

弧形菜单

我尝试了一些带有 svg 等的代码，但我没有让它工作。

甚至可以使这样的导航/菜单响应吗？

也许您可以通过一些提示或其他方式帮助我。会很高兴的！

提前致谢。

标签： javascriptphphtmlcssresponsive

解决方案

是的，您可以使用 SVG。然后，您可以将其设置z-index得更高，这样您就可以将其置于页面的最前面。菜单会z-index比 SVG 低。每个菜单项都会transform: translateY()向上移动。因此，您将对它们中的每一个进行不同的定位。最后，您将修改height每个项目的 以补偿transform位移。

像这样：

.item1 {
  transform: translate(-20px);
  height: 100px;
}
.item2 {
  transform: translate(-40px);
  height: 120px;
}
.item3 {
  transform: translate(-60px);
  height: 140px;
}

希望能帮助到你。

推荐阅读