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

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:

I'm looking for this:

(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 :)

jquerycsstwitter-bootstrap


Solution 1:[1]

I'm using bootstrap 3.3.7 and ASP.NET Core MVC with a ViewComponent that looks basically like this:

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 sirdank

Related Questions