html - 圆形导航教程?

标签 html css transitions mousehover

<分区>

我希望在各个元素上加入一个带有悬停效果的圆形导航。那里有教程吗?

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

最佳答案

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

最简单的就是做一个常规的菜单,使用position: absolute;在所有单个元素上将它们定位在 Logo 周围。

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

它出现在一个众所周知的网站上,至少对我来说是这样,并且包含一个带有不同形状的彩色 Blob 的图形。像 quirksmode.com 这样的东西……我不知道了,等我找到了再告诉你。

这会让你大部分时间... http://www.google.nl/search?q=html+image+map+hover

关于html - 圆形导航教程?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2404462/

相关文章:

带有 UINavigationController 的 iOS 7 自定义呈现转换

html - 如何将相对大小的子元素保持在父元素的边界内?

Javascript:.js 文件之间共享的全局变量

html - 让图像根据浏览器大小重复自身

javascript - d3 转换中圆的碰撞/重叠检测

python - 在 Python 中创建图形用户界面 (GUI)

html - Webkit 将 <details> ascendants 重置为默认盒子模型

javascript - Pug 代码块抛出意外的 token 错误

javascript - 将 5,000 个 onclick() 弹出窗口转换为模态的策略

css 底部边距不起作用?