弧形菜单响应可能吗？

Question

一个客户想要他的网站重新设计他的旧菜单，我应该为他做。它看起来像这样：

Curved Menu

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

是否有可能使 navigation/menu 这样的响应式？

也许你可以帮我一些提示什么的。会很高兴的！

提前致谢。

Answer 1

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

像这样：

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

希望对您有所帮助。

弧形菜单响应可能吗？

Curved Menu Responsive possible?

html

javascript

css

php

responsive