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

标签 html css svg

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

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

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

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

最佳答案

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

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

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

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

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

关于html - 如何创建像 Treehouse 这样的左侧导航栏?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27909774/

相关文章:

html - 如何解决输入字段上的错误行高?

html - 我应该为最新的 Unicode 字符使用哪种字体?

javascript - 如何将 SVG 的背景颜色正确转换为 Canvas

javascript - 如何使用 d3 根据颜色范围的值对 SVG 图像进行着色?

html - 我试着让三张图片并排 float ,宽度为 33%。为什么右边有多余的空间?

javascript - 从由独立线创建的形状创建多边形

html - 标题文本不会到达代码底部

javascript - 使用javascript将鼠标悬停在动画 Canvas 上

html - twitter bootstrap IE9,导航崩溃不会将其余内容向下推

javascript - 如何根据窗口/文档高度更改元素的高度?