1

我想用CSS和jQuery制作类似 Facebook 的新顶部导航，如下所示。

在此处输入图像描述

还有这个：

在此处输入图像描述

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

4

3 回答 3

7

jQuery 通知菜单非常适合您。这是一个 jQuery 插件，用于向任何菜单添加通知气泡和通知列表。

演示图片

您可以通过简单地编辑 CSS 轻松地将其调整为您想要的样式。

检查这个演示。

于 2012-09-26T06:35:47.427 回答
0

查看Twitter 引导程序。他们为您完成了所有很酷的 JavaScript 内容。他们还从一个非常好的响应式基础 CSS 开始。

于 2012-09-26T06:26:45.870 回答
0

这个的关键很简单。通过无序列表和固定位置元素的正确组合，您可以轻松实现这一目标。

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

要像 Facebook 那样设置下拉菜单的样式，您必须使用 CSS 做更多的事情来弄清楚如何获得正确的形状，但不用担心！也有关于这方面的教程/示例！

“气泡点工具提示”教程：

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

于 2012-09-26T06:33:32.980 回答