Solución:
La mejor manera de lograr esto es usando posicionamiento absoluto:
/* 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>
Aquí hay uno que incluye animación para cuando cambia el recuento.
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})
Animación con 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);
});
Utiliza Font Awesome para el icono del globo y jQuery Transit para la animación.
Probablemente absolute
posicionamiento:
<div id="globe" style="height: 30px; width: 30px; position: relative;">
<img src="https://foroayuda.es/globe.gif" />
<div id="notification" style="position: absolute; top: 0; right;0;">1</div>
</div>
Algo como eso. Obviamente, querrá cambiar los detalles y probablemente usar imágenes de fondo. El punto es enfatizar el posicionamiento absoluto que es realmente consistente en todos los navegadores, al menos en mi experiencia.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)