¿Buscas crear un popup de notificaciones parecido al que puedes ver en redes sociales como Facebook? En este artículo te explicaremos cómo crear una ventana emergente de notificaciones utilizando jQuery, HTML y CSS, y entenderás cómo los elementos CSS te ayudarán a mejorar el diseño web.
Esta característica es muy necesaria si vas a implementar una red social para minimizar y enriquecer los elementos UX. Mediante unas cuantas líneas de código podrás implementar estos conceptos en tus futuros proyectos. Atento que empezamos...
Código HTML
Crea una lista desordenada HTML para el diseño de tu menú.
<ul id="nav"> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> <li id="notification_li"> <a href="#" id="notificationLink">Notifications</a> // Notification Popup Code... </li> <li><a href="#">Link4</a></li> </ul>
Código CSS
Añade float:left para la vista horizontal.
#nav{list-style:none;margin: 0px;padding: 0px;}
#nav li {
float: left;
margin-right: 20px;
font-size: 14px;
font-weight:bold;
}
#nav li a{color:#333333;text-decoration:none}
#nav li a:hover{color:#006699;text-decoration:none}
Código HTML
El popup para las notificaciones está dividido en tres partes: el título del popup para las notificaciones, el cuerpo del popup para las notificaciones y el footer del popup para las notificaciones.
<li id="notification_li"> <span id="notification_count">3</span> <a href="#" id="notificationLink">Notifications</a> <div id="notificationContainer"> <div id="notificationTitle">Notifications</div> <div id="notificationsBody" class="notifications"></div> <div id="notificationFooter"><a href="#">See All</a></div> </div> </li>
Código CSS
Échale un vistazo a las propiedades CSS de la ventana emergente para las notificaciones.
#notification_li
{
position:relative
}
#notificationContainer
{
background-color: #fff;
border: 1px solid rgba(100, 100, 100, .4);
-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
overflow: visible;
position: absolute;
top: 30px;
margin-left: -170px;
width: 400px;
z-index: -1;
display: none; // Enable this after jquery implementation
}
// Popup Arrow
#notificationContainer:before {
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
color: transparent;
border: 10px solid black;
border-color: transparent transparent white;
margin-top: -20px;
margin-left: 188px;
}
#notificationTitle
{
font-weight: bold;
padding: 8px;
font-size: 13px;
background-color: #ffffff;
position: fixed;
z-index: 1000;
width: 384px;
border-bottom: 1px solid #dddddd;
}
#notificationsBody
{
padding: 33px 0px 0px 0px !important;
min-height:300px;
}
#notificationFooter
{
background-color: #e9eaed;
text-align: center;
font-weight: bold;
padding: 8px;
font-size: 12px;
border-top: 1px solid #dddddd;
}
Burbuja que contendrá el contador de notificaciones
Burbuja circular con el contador de notificaciones.
#notification_count
{
padding: 3px 7px 3px 7px;
background: #cc0000;
color: #ffffff;
font-weight: bold;
margin-left: 77px;
border-radius: 9px;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
position: absolute;
margin-top: -11px;
font-size: 11px;
}
jQuery
Contiene el código Javascript. En $("#notificationLink").click(function(){}- notificationContainer es el ID del div del propio popup. Utilizando la función de jQuery fadeToggle() mostraremos el popup basándonos en los clicks del usuario.
<script type="text/javascript" src="js/jquery.min.1.9.js"></script>
<script type="text/javascript" >
$(document).ready(function()
{
$("#notificationLink").click(function()
{
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
return false;
});
//Document Click hiding the popup
$(document).click(function()
{
$("#notificationContainer").hide();
});
//Popup on click
$("#notificationContainer").click(function()
{
return false;
});
});
</script>
Fuente: 9lessosn.info