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