Bootstrap：在标题（导航栏）中实现类似 facebook 的通知作为子菜单，而不仅仅是计数器

Posted 2023-03-06

【中文标题】Bootstrap：在标题（导航栏）中实现类似 facebook 的通知作为子菜单，而不仅仅是计数器

【英文标题】：Bootstrap: Implement facebook-like notifications in header (navbar) as submenu, not just a counter

【发布时间】：2013-11-15 05:42:01

【问题描述】：

我可能只是智障，几分钟内就能得到答案，但我似乎找不到我要找的东西。

我需要在我的导航栏中实现“类似facebook”的通知。我可以在图标旁边实现计数器，将其链接到下拉列表。在该子菜单中动态加载新条目作为通知也没有问题。但我似乎找不到的是 actual 子菜单。

我知道这是一个自定义 CSS 来显示具有固定最大高度和溢出的子菜单，以便您可以滚动到它，但找不到任何教程/默认示例来显示 CSS 是如何完成的。它在许多管理皮肤中实现，但是当我搜索通知时，谷歌没有显示我的意思：它显示“其他”通知（在 facebook：左下角 pling）但不显示导航栏通知.

那些“导航栏通知”叫什么？有没有人有教程、简单的 CSS 或任何东西？我已经找了几天了，这是我最后的手段（尽管我不应该这么固执，直接问：我想做我的功课/努力）。我完全被困住了..

总结：

我不寻找这些：

http://sciactive.github.io/pnotify/ Show notification counter with bootstrap Make a Notification counter with twitter bootstrap

我正在寻找这个：

http://demo.themepixels.com/webpage/starlight/dashboard.html（顶 右键“5”，点击 -> 那个菜单！） http://www.keenthemes.com/preview/index.php?theme=metronic_admin&page=index.html（右上角的三个按钮，没有那些荒谬烦人的框哈哈） http://suggeelson.com/themes/supr/dashboard.html?username=Administrator&password=somepass（但那个好像不支持二十多岁的通知）

（对于那些只想简单地说“嘿，你可以撕掉那个 CSS”或“你为什么不买那个主题？”的人来说，答案很简单：我不撕，我不是当我需要 one 元素时支付完整的主题。我只是在寻找有关如何设置 CSS 的教程，或者我可以实现的一些插件）

如前所述，后端/jquery“推送”不是问题。只是那个东西的名称以及我如何设置它的样式。

-- 编辑--

tooltip/popover 有点做我想要的，但仍然不完全是我在做的事情（一旦你将鼠标悬停在 tooltip/popover 上，它们就会消失，这样就可以工作了 hacky-sacky...）一个下拉列表，剩下的就是一些额外的 CSS 来使事情正常工作。太糟糕了，没有一个正常/完整的教程。无论如何，感谢那些观看的 20 个人 :)

【参考方案1】：

我正在使用 bootstrap 3.3.7 和 ASP.NET Core MVC，其 ViewComponent 基本上如下所示：

<a href="#" data-toggle="dropdown" role="button">Notifications</a>
<ul class="dropdown-menu dropdown-menu-right notify-drop">
    <div>
        <div>@Title</div>
    </div>
    <div>
        <li>@Content</li>
    </div>
    <div>
        <a>Mark All Read</a>
    </div>
</ul>