"Notifications Dropdown (JavaScript included)"
Bootstrap 4.0.0 Snippet by MeTaLiKiD

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- NAVBAR -->
<nav class="navbar fixed-top navbar-light bg-faded">
<!-- ICON -->
<div class="dropdown nav-button notifications-button hidden-sm-down">
<a class="btn btn-secondary dropdown-toggle" href="#" id="notifications-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i id="notificationsIcon" class="fa fa-bell-o" aria-hidden="true"></i>
<span id="notificationsBadge" class="badge badge-danger"><i class="fa fa-spinner fa-pulse fa-fw" aria-hidden="true"></i></span>
</a>
<!-- NOTIFICATIONS -->
<div class="dropdown-menu notification-dropdown-menu" aria-labelledby="notifications-dropdown">
<h6 class="dropdown-header">Notifications</h6>
<!-- CHARGEMENT -->
<a id="notificationsLoader" class="dropdown-item dropdown-notification" href="#">
<p class="notification-solo text-center"><i id="notificationsIcon" class="fa fa-spinner fa-pulse fa-fw" aria-hidden="true"></i> Chargement des dernières notifications...</p>
</a>
<div id="notificationsContainer" class="notifications-container"></div>
<!-- AUCUNE NOTIFICATION -->
<a id="notificationAucune" class="dropdown-item dropdown-notification" href="#">
<p class="notification-solo text-center">Aucune nouvelle notification</p>
</a>
<!-- TOUTES -->
<a class="dropdown-item dropdown-notification-all" href="#">
Voir toutes les notifications
</a>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.dropdown-item.dropdown-notification:active, .dropdown-item.dropdown-notification.active {
color: #1d1e1f;
text-decoration: none;
background-color: #f7f7f9;
}
.dropdown-notification:hover .notification-read {
color: #34495E;
}
.dropdown-notification-all {
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-style: oblique;
background-color: #34495E;
color: white;
}
.dropdown-notification-all:hover {
background-color: #34495E;
color: white;
}
.notifications-container {
max-height: 300px;
overflow: auto;
}
.notification-dropdown-menu {
padding-bottom: 0;
min-width: 528px;
}
.notification-img {
width: 48px;
display: inline-block;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(function () {
var count = 6;
var lastCount = 0;
// Pour la maquette
var notifications = new Array();
notifications.push({
href: "#",
image: "Modification",
texte: "Votre incident " + makeBadge("17-0253") + " a été modifié",
date: "Mercredi 10 Mai, à 9h53"
});
notifications.push({
href: "#",
image: "Horloge",
texte: "Vous avez " + makeBadge("13") + " incidents en retards",
date: "Mercredi 10 Mai, à 8h00"
});
notifications.push({
href: "#",
image: "Visible",
texte: "Un nouvel incident dans votre groupe " + makeBadge("réseau"),
date: "Mardi 9 Mai, à 18h12"
});
notifications.push({
href: "#",
image: "Ajout",
texte: "Ouverture du problème " + makeBadge("17-0008"),
date: "Mardi 9 Mai, à 15h23"
});
notifications.push({
href: "#",
image: "Annulation",
texte: "Clotûre du problème " + makeBadge("17-0007"),
date: "Mardi 9 Mai, à 12h16"
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: