Crear una barra de notificaciones con HTML y CSS

La barra de notificaciones es la mejor manera de dirigir a tus visitantes y promocionar el contenido más importante de tu web. Utilizar una barra de notificaciones ayuda a promocionar tus productos o a mostrar avisos de gran calado que sean de importancia para los usuarios. En este tutorial, veremos como crear una barra de notificaciones en la parte superior de la web para tu sitio web.

Antes de empezar a crear la barra de notificaciones, vamos a ver sus múltiples beneficios.

  • Promocionar productos para aumentar sus ventas
  • Incrementar la interacción con las redes sociales de la web
  • Mostrar noticias y eventos que sean de interés de los usuarios
  • Aumentar suscriptores mostrando el formulario de suscripción

Es muy sencillo crear una barra de notificaciones fija en la parte superior de la web utilizando HTML y CSS. También, puedes usar jQuery si quieres añadir funcionalidades concretas a la barra. En este artículo, te proporcionaremos un simple script para añadir una barra de notificaciones en la parte superior de la web utilizando HTML, CSS y jQuery.

Código HTML

El siguiente código HTML muestra una barra de notificaciones fija en la parte superior de la web, con un icono para cerrarla.

<div id="hellobar-bar" class="regular closable">
    <div class="hb-content-wrapper">
        <div class="hb-text-wrapper">
            <div class="hb-headline-text">
                <p><span>Regístrate ya en programacion.net y accederas a multitud de tutoriales gratuitos</span></p>
            </div>
        </div>
        <a href="http://www.programacion.net" target="_blank" class="hb-cta hb-cta-button">
            <div class="hb-text-holder">
                <p>Regístrate</p>
            </div>
        </a>
    </div>
    <div class="hb-close-wrapper">
        <a href="javascript:void(0);" class="icon-close">✖</a>
    </div>
</div>

Código CSS

El siguiente código CSS lo utilizaremos para personalizar nuestra barra de notificaciones y su contenido.

body{
    margin: 0;
    padding: 0;
    width: 100%;
}
#hellobar-bar {
    font-family: "Open Sans", sans-serif;
    width: 100%;
    margin: 0;
    height: 30px;
    display: table;
    font-size: 17px;
    font-weight: 400;
    padding: .33em .5em;
    -webkit-font-smoothing: antialiased;
    color: #5c5e60;
    position: fixed;
    background-color: white;
    box-shadow: 0 1px 3px 2px rgba(0,0,0,0.15);
}
#hellobar-bar.regular {
    height: 30px;
    font-size: 14px;
    padding: .2em .5em;
}
.hb-content-wrapper {
    text-align: center;
    text-align: center;
    position: relative;
    display: table-cell;
    vertical-align: middle;
}
.hb-content-wrapper p {
    margin-top: 0;
    margin-bottom: 0;
}
.hb-text-wrapper {
    margin-right: .67em;
    display: inline-block;
    line-height: 1.3;
}
.hb-text-wrapper .hb-headline-text {
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
}
#hellobar-bar .hb-cta {
    display: inline-block;
    vertical-align: middle;
    margin: 5px 0;
    color: #ffffff;
    background-color: #22af73;
    border-color: #22af73
}
.hb-cta-button {
    opacity: 1;
    color: #fff;
    display: block;
    cursor: pointer;
    line-height: 1.5;
    max-width: 22.5em;
    text-align: center;
    position: relative;
    border-radius: 3px;
    white-space: nowrap;
    margin: 1.75em auto 0;
    text-decoration: none;
    padding: 0;
    overflow: hidden;
}
.hb-cta-button .hb-text-holder {
    border-radius: inherit;
    padding: 5px 15px;
}
.hb-close-wrapper {
    display: table-cell;
    width: 1.6em;
}
.hb-close-wrapper .icon-close {
    font-size: 14px;
    top: 15px;
    right: 25px;
    width: 15px;
    height: 15px;
    opacity: .3;
    color: #000;
    cursor: pointer;
    position: absolute;
    text-align: center;
    line-height: 15px;
    z-index: 1000;
    text-decoration: none;
}

Función para cerrar la barra

Solo nos bastará una línea de jQuery para esconder la barra de notificaciones. Para ello utilizaremos un botón de cerrar, representando por el icono de una X. Así que, como vamos a utilizar jQuery, lo primero será incluir la librería.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Para esconder la barra, utilizaremos el evento onclick de jQuery para llamar a la función fadeOut() cuando se pulse en el enlace.

<a href="javascript:void(0);" class="icon-close" onclick="$('#hellobar-bar').fadeOut()">✖</a>

Fuente: codexworld.com

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.