html - 圆形导航教程？

Question

我希望在单个项目上加入带有悬停效果的圆形导航。那里有教程吗？

如果不是，将 6、8 或 12 个链接“项目”围绕圆形徽标圆形排列的最佳方法是什么？它们在悬停、活跃或沮丧时会有不同的状态？我希望这些物品有那种“纽扣”的感觉。如果有任何适合它的东西，我可以使用 javascript 来执行此操作，但更喜欢主要使用 CSS。

score 1 · Accepted Answer

有几种方法可以做到这一点。

最简单的就是做一个常规的菜单，使用 position: absolute; 在所有单个项目上将它们定位在徽标周围。

制作更复杂的圆形菜单的另一种方法是使用图像映射。我曾经找到一个很好的教程，其中涉及到图像地图上的复杂形状和悬停效果，但是我弄丢了，抱歉。

它是在一个众所周知的网站上，至少对我来说是这样，它包含一个带有不同形状的彩色斑点的图形。像 quirksmode.com 之类的东西……我不知道了，我会在找到时告诉你。

1 回答 1