html - 如何创建像 Treehouse 这样的左侧导航栏？

Question

我希望创建一个左侧导航栏，就像 Treehouse 网站上的导航栏一样: http://teamtreehouse.com/library

我要复制的主要内容是在图标旁边滑出/淡入的链接工具提示。查看源代码，我相信这是通过 CSS 完成的？如果我错了，请纠正我。

此外，我注意到他们在链接上有 svg 类，它们是否只是为了网站响应而不是真正与链接/工具提示的功能相关？

感谢您对此提供的任何帮助，如果我可以提供任何其他信息，请告诉我。

Answer 1

对于栏本身，只需将 float div 扩展到 100% 高度并将其位置设置为固定。

弹出的工具提示可以使用 javascript 或 CSS 完成。

对于 javascript 或 jQuery，有许多工具提示库可以为您提供相同的功能。在 CSS 中，您可以添加显示 div 的悬停状态。这些方法中的任何一种都有效。

对于 CSS 解决方案，请参阅此相关问题:Using only CSS, show div on hover over <a>

据我所知，这些上的 SVG 类实际上是图标本身。 SVG 是一种简洁的格式，可让您将字体样式应用于图像。如果您查看引导框架图标，您会发现它们是这样显示的。我猜这里正在使用相同的技术。