web-dev-qa-db-fra.com

Plus facile css pour les notifications "rouges" de style Facebook

J'ai besoin d'une notification de style facebook, mais obtenir quelque chose qui ressemble à Nice navigateur croisé semble difficile. Par exemple, différents navigateurs semblent traiter les rembourrages différemment, ce qui entraîne des notifications étranges.

Quelle est la meilleure façon de naviguer entre les navigateurs pour que les notifications soient bien affichées? Pas défavorable à l’utilisation de javascript, mais le css pur est bien sûr préférable

enter image description here

javascripthtmlcssuser-interfaceuser-experience
78
ming yeow

Le meilleur moyen d'y parvenir est d'utiliser positionnement absol:

/* Create the blue navigation bar */
.navbar {
  background-color: #3b5998;
  font-size: 22px;
  padding: 5px 10px;
}

/* Define what each icon button should look like */
.button {
  color: white;
  display: inline-block; /* Inline elements with width and height. TL;DR they make the icon buttons stack from left-to-right instead of top-to-bottom */
  position: relative; /* All 'absolute'ly positioned elements are relative to this one */
  padding: 2px 5px; /* Add some padding so it looks Nice */
}

/* Make the badge float in the top right corner of the button */
.button__badge {
  background-color: #fa3e3e;
  border-radius: 2px;
  color: white;
 
  padding: 1px 3px;
  font-size: 10px;
  
  position: absolute; /* Position the badge within the relatively positioned button */
  top: 0;
  right: 0;
}
<!-- Font Awesome is a great free icon font. -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="navbar">
  <div class="button">
    <i class="fa fa-globe"></i>
    <span class="button__badge">2</span>
  </div>
  <div class="button">
    <i class="fa fa-comments"></i>
    <span class="button__badge">4</span>
  </div>
</div>
155
Titus

En voici une qui inclut une animation pour le moment où le nombre change.

http://jsfiddle.net/rahilsondhi/FdmHf/4/

<ul>
<li class="notification-container">
    <i class="icon-globe"></i>
    <span class="notification-counter">1</span>
</li>

    .notification-container {
    position: relative;
    width: 16px;
    height: 16px;
    top: 15px;
    left: 15px;

    i {
        color: #fff;
    }
}

.notification-counter {   
    position: absolute;
    top: -2px;
    left: 12px;

    background-color: rgba(212, 19, 13, 1);
    color: #fff;
    border-radius: 3px;
    padding: 1px 3px;
    font: 8px Verdana;
}




$counter
.css({opacity: 0})
.text(val)
.css({top: '-10px'})
.transition({top: '-2px', opacity: 1})

Animation avec jQuery:

$('button').click(function()
{
    var $counter = $('.notification-counter')
    var val = parseInt $counter.text();
    val++;
    $counter.css({opacity: 0}).text(val).css({top:'-10px'}).animate({top: '-1px', opacity: 1}, 500);
});

Il utilise Font Awesome pour l'icône globe et jQuery Transit pour l'animation.

33
Rahil Sondhi

très bon tutoriel pour vous aider à démarrer.

http://rndnext.blogspot.com/2009/02/creating-badge-icon-plugin-with-jquery.html

4
bh88

Probablement absolute positionnement:

<div id="globe" style="height: 30px; width: 30px; position: relative;">
 <img src="/globe.gif" />
 <div id="notification" style="position: absolute; top: 0; right;0;">1</div>
</div>

Quelque chose comme ca. Évidemment, vous voudriez changer les détails et probablement utiliser des images d’arrière-plan. L’important est de souligner le positionnement absolu qui est vraiment cohérent sur tous les navigateurs, du moins dans mon expérience.

3
Dustin Laine

Balisage:

<div id="ContainerDiv">
    <div id="MainImageDiv"> //Add the image here or whatever you want </div>
    <div id="NotificationDiv"> </div>
</div>

Css:

#NotificationDiv {
    position: absolute;
    left: -10 //use negative values to Push it above the #MainImageDiv
    top: -4 
    ...
}
1
neebz