Bootstrap Snippet Notifications Dropdown (JavaScript included) using HTML CSS jQuery

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="not ificationsBadge" 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">Notificaciones</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> Cargando nuevas notificaciones...</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="#">
          Ver todas las notificaciones
        </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-y: auto;
}
.notification-dropdown-menu {
  padding-bottom: 0;
  max-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 = 7;
  var lastCount = 0;
  // Pour la maquette
  var notifications = new Array();
  notifications.push({
    href: "#",
    image: "Modification",
    texte: "Votre incident " + makeBadge("17-0253") + " a été modifié porque jose mario se la estaá comiendo doblada",
    date: "Hace 6 días por Usuario Administrador"
  });
  notifications.push({
    href: "#",
    image: "Modification",
    texte: "Votre incident " + makeBadge("17-0253") + " a été modifié porque jose mario se la estaá comiendo dobladas asdf",
    date: "Hace 6 días por Usuario Administrador"
  });
  notifications.push({
    href: "#",
    image: "Modification",
    texte: "Votre incident " + makeBadge("17-0253") + " a été modifié porque jose mario se la estaá comiendo doblada",
    date: "Hace 6 días por Usuario Administrador"
  });
  notifications.push({
    href: "#",
    image: "Modification",
    texte: "Votre incident " + makeBadge("17-0253") + " a été modifié porque jose mario se la estaá comiendo doblada",
    date: "Hace 6 días por Usuario Administrador"
  });
  notifications.push({
    href: "#",
    image: "Modification",
    texte: "Votre incident " + makeBadge("17-0253") + " a été modifié porque jose mario se la estaá comiendo doblada",
    date: "Hace 6 días por Usuario Administrador"
  });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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