类似Facebook的顶级导航CSS和jQuery

Question

我希望使用CSS和jQuery制作类似Facebook的新导航，如下所示。

而且：

如您所见，弹出框的箭头始终位于所选导航栏下，弹出框宽度相同。是否有任何教程或插件可以做到这一点？

Answer 1

jQuery Notification Menu对你来说是完美的。它是一个jQuery插件，可以向任何菜单添加通知气泡和通知列表。

只需编辑CSS即可轻松将其调整为所需的风格。

Check this demo.

Answer 2

结帐Twitter Bootstrap。他们为你完成了所有很酷的JavaScript工作。他们还有一个非常好的响应式基础CSS开始。

Answer 3

这个的关键很简单。正确组合无序列表＆amp;固定位置的元素，你可以很容易地实现这一点。

1. 对于顶栏，请使用无序列表模式：http://pea.rs/navigation/horizontal-buttons
2. 对于下拉菜单，您有两种选择：
   • 您可以将下拉列表隐藏起来，然后将其取消隐藏jQuery。
   • 或者使用一些CSS技巧将它从页面上移开，直到onHover。

要像Facebook一样设置下拉列表，你必须用CSS做更多的事情来弄清楚如何获得正确的形状，但不要担心！还有教程/示例！

'泡泡点工具提示'教程：

• Bubble Point Tooltips with CSS3 & jQuery
• How to Create CSS3 Speech Bubbles Without Images

总的来说，我推荐教程 How to Build a Kick-Butt CSS3 Mega Drop-Down Menu （完成时间不会超过30分钟到一小时）：