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

Question

我想在这里创建一个类似Treehouse网站上的左侧导航栏： http://teamtreehouse.com/library

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

另外，我注意到他们在链接上有svg类，它们只是用于站点响应而不是真正与链接/工具提示的功能相关吗？

感谢您提供任何帮助，如果我能提供任何其他信息，请告诉我。

Answer 1

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

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

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

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

从我所知道的SVG课程实际上就是图标本身。 SVG是一种简洁的格式，可让您将字体样式应用于图像。如果你看一下bootstrap框架图标，你会看到它们是如何显示的。我猜这里正在使用相同的技术。