jquery - Bootstrap: Implement facebook-like notifications in header (navbar) as submenu, not just a counter

Question

Chances are I'm just retarded and I'm getting an answer within a few minutes, but I just can't seem to find what I'm looking for.

I need to implement "facebook-like" notifications in my navbar. It's no problem for me to implement the counter next to an icon, linking it to a dropdown. It's also no problem to dynamically load new entries in that submenu as notifications. But what I can't seem to find, is the actual submenu.

I know it's a custom CSS to display the submenu with a fixed max-height and an overflow so you can scroll into it, but can't find any tutorials/default examples showing how the CSS is done. It's implemented in numerous admin skins, but when I search for notifications, Google isn't showing what I mean: it shows the "other" notfifications (in facebook: left bottom pling) but not the navbar notifications.

What are those "navbar notifications" called? Does anyone have a tutorial, simple CSS or anything at all? I've been searching for a couple of days now and this is my last resort (allthough I shouldn't have been so stubborn and asked it straight away: I wanted to do my homework/effort). I'm absolutely stuck..

Summation:

I do not look for these:

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

I'm looking for this:

• http://demo.themepixels.com/webpage/starlight/dashboard.html (top right "5", click -> THAT menu!)
• http://www.keenthemes.com/preview/index.php?theme=metronic_admin&page=index.html (the three buttons on top right, without those absurdly annoying boxes lol)
• http://suggeelson.com/themes/supr/dashboard.html?username=Administrator&password=somepass (but that one doesn't seem to support twenty-something notifications)

(To those who want to answer by simply saying "hey, you could rip that CSS" or "why don't you buy that theme?" the answers are simple: I don't rip, and I'm not paying for a full theme when I need one element.. I'm simply looking for either a tutorial on how to get that CSS setup, or some plugin that I can implement)

As said, the backend/jquery "push" aren't the issues. Just the name of that thing and how I can style the thing.

-- edit--

tooltip/popover are somewhat doing what I want, but still not exactly what i'm doing (as soon as you're hovering on the tooltip/popover, they disappear so that would work hacky-sacky...) customised a dropdown, all there's left is some extra css to make things work. too bad there isn't a normal/complete tutorial. anyway, thanks for those 20 who viewed :)

Answer 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>