¿De que va esta barra emergente?
Hoy mostraré como hacer una barra emergente que aparece en la parte superior del navegador, este tipo de barras pueden ser útiles para colocar mensajes, botones de herramientas, etc. La idea surgió cuando vi la llamada “Hello Bar” de este sitio hellobar.com, de manera que me dí a la tarea de crear algo similar.
He probado el resultado del código que le presentaré únicamente en Chrome y en Firefox, por lo que podría no funcionar adecuadamente en otros navegadores, pero si usted desea hacer las adecuaciones necesarias en esos casos…¡adelante! y espero comparta sus resultados 🙂 .
Puede ver el demo de la barra en jsfiddle.net:
1. Creación de la estructura del documento HTML5.
Primeramente elabore la estructura general de su página, para ello cree un nuevo archivo HTML y coloque el siguiente código en el:
<!DOCTYPE html>
<html>
<head>
<meta "charset=iso-8859-1" />
<script src='libs/jquery-1.7.1.min.js'></script>
<script src='libs/jquery-ui-1.8.18.custom.min.js'></script>
<title>Barra Emergente</title>
</head>
<body>
<header>
<div id="popup">
<a href=# class="hide"></a>
<nav id="header_nav_menu">
<a href="#" class="btn_new_page" title="New Book"></a>
<a href="#" class="btn_page" title="New Page"></a>
<div class="dropdown_area">
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</nav>
<div id="hide_area">∧</div>
</div>
<div id="showpop">
<a href="#" class="showpoplink"></a>
∨
</div>
</header>
<article>
<p>
<br/>Contenido en la página</p>
<p>Más cóntenido en la página</p>
</article>
</body>
</html>
Analicemos un poco, si nunca ha hecho páginas HTML5 antes, entonces no sobra decir que la etiqueta <!DOCTYPE html> es la “señal” que utilizan los navegadores para saber que el código del archivo es HTML5 y no una versión previa. Por otro lado, el fragmento de código que contiene los elementos que conforman la barra emergente en si misma es:
<div id="popup">
<a href=# class="hide"></a>
<nav id="header_nav_menu">
<a href="#" class="btn_new_page" title="New Book"></a>
<a href="#" class="btn_page" title="New Page"></a>
<div class="dropdown_area">
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
</div>
</nav>
<div id="hide_area">∧</div>
El código anterior básicamente crea un elemento div que contiene un enlace que servirá para ocultar la barra cuando se hace clic en el, adicionalmente se colocan otros tres enlaces, que solo sirven como ejemplo de contenido que aparece dentro de la barra emergente en este ejercicio, estos enlaces pueden ser sustituidos por el contenido que más le convenga.
Note también este código:
<div id="showpop" > <a href="#" class="showpoplink"></a> ∨ </div>
Este div aparacerá cuando la barra esté escondida y servirá para mostrarla de nuevo cuando se hace clic.
Ahora bien, para hacer funcional a nuestro ejercicio hecharemos mano de la popular librería JQuery y su complemento para efectos visuales JQuery UI, si no esta familiarizado con con JQuery lo único que debe de saber al momento es que, fundamentalmente, JQuery es un conjunto de funciones JavaScript que conforman una amplia librería que le puede evitar una gran cantidad de trabajo, que de otra manera tendría que desarrollar usted mismo.
Para este ejercicio descargué y coloqué ambas librerías en una carpeta llamada libs, pero puede colocarlas donde usted desee haciendo la corrección pertinente en la siguientes líneas de código.
Para JQuery:
<script src='libs/jquery-1.7.1.min.js'></script>
Para JQuery UI:
<script src='libs/jquery-ui-1.8.18.custom.min.js'></script>
2. Agregar funcionalidad
Para lograr que el código creado reaccione a las acciones del usuario, que para el caso son solo dos, ocultar y mostrar la barra, utilizaremos el siguiente código:
<script type="text/javascript">
$(document).ready(function(){
$('#popup').show("bounce", { times:3 }, 350);
$('#showpop').hide();
$('.hide').click(function(){
$('#popup').slideUp();
$('#showpop').fadeIn('slow');
return false;
});
$('a.showpoplink').click(function(){
$('#popup').show("bounce", { times:3 }, 350);
$('#showpop').hide();
return false;
});
});
</script>
Lo que sucede gracias a este código es lo siguiente, cuando el documento HTML5 es reportado como “listo” por parte del navegador, inmediatamente la barra se muestra con en efecto de rebote, mientras que el enlace que sirve para mostrar la barra se oculta ya que no es necesario cuando la barra está visible:
$('#popup').show("bounce", { times:3 }, 350);
$('#showpop').hide();
Al mismo tiempo se indica cual botón dentro de la barra debe servir para ocultarla haciendo clic:
$('.hide').click(function(){
$('#popup').slideUp();
$('#showpop').fadeIn('slow');
return false;
});
Finalmente, se hace los mismo pero para el caso del enlace que servirá para mostrar la barra cuando esta está oculta, utilizando el mismo efecto de rebote se ve en la carga inicial:
$('a.showpoplink').click(function(){
$('#popup').show("bounce", { times:3 }, 350);
$('#showpop').hide();
return false;
});
3. Estilizar y ordenar los elementos.
Finalmente no queda más que darle belleza y orden a nuestros elementos HTML utilizando una hoja de estilos, veamos estos poco a poco para tener mejor idea de que hacemos.
body {
margin:0;
padding:0;
}
#popup {
top: 0;
width: 100%;
padding: 20px 0px 0px 0px;
height: 50px;
background-image: linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
background-image: -o-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 14%, rgb(249,249,249) 60%);
-moz-box-shadow: 0 0 5px 5px #bfbfbf;
-webkit-box-shadow: 0 0 5px 5px#bfbfbf;
box-shadow: 0 0 5px 5px #bfbfbf;
display: block;
/*position: fixed;*/
}
Los estilos anteriores se encargan primeramente de eliminar cualquier espacio entre el cuerpo del documento HTML y los elementos que contiene mediante la personalización de la etiqueta body. Enseguida se indica el aspecto que tendrá el div que contiene a la propia barra con el estilo #popup, ahí se indica la posición, el ancho y alto de la misma. Utilizamos las nuevas características de CSS3 para dar un gradiente al fondo de la barra y darle un discreto sombreado; en versiones anteriores de CSS esto no hubiera sido posible y tendría que haber creado una imagen previamente, tendría que colocarla y repetirla como fondo, esto ya no es necesario gracias a CSS3.
Ahora toca el turno de configurar el tamaño de el área sensible dentro de la barra para poder ocultarla:
#hide_area{
width: inherit ;
background: #666;
padding: 0px;
margin: 20px 0px 0px 0px;
color:#FFF;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
font-weight:bold;
text-align:center;
/*border:solid;*/
}
a.hide {
top: 0;
width: 100%;
margin-top: 50px;
padding: 8px 0px 8px 0px;
display: block;
cursor:default;
position: fixed;
/*border:solid;*/
}
Los estilos anteriores solo se encargan de definir el tamaño, posición y colores utilizados por el enlace que funciona como área sensible para poder ocultar la barra al hacer clic.
Ahora se hace lo mismo pero para el enlace que muestra la barra cuando se hace clic:
#showpop{
top: 0;
width: 100%;
height: 14px;
background: #666;
padding: 0px;
margin: 0px 0px 0px 0px;
-moz-box-shadow: 0 0 5px 5px #bfbfbf;
-webkit-box-shadow: 0 0 5px 5px#bfbfbf;
box-shadow: 0 0 5px 5px #bfbfbf;
color:#FFF;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
position: fixed;
/*border:solid;*/
}
a.showpoplink {
top: 0;
width: 100%;
margin-top: 0px;
padding: 5px 0px 5px 0px;
display: block;
cursor:default;
position: fixed;
/*border:solid;*/
}
Para terminar, he agregado unos botones que funcionan como contenido dentro de la barra emergente que se ha creado, para definir su aspecto utilicé los siguientes estilos, por supuesto usted tendrá que desarrollar los suyos para su propio contenido:
#header_nav_menu a {
padding: 0px 13px 10px 13px;
background-repeat: no-repeat;
cursor: pointer;
/*border:solid;*/
}
#header_nav_menu a.btn_new_page {
background-image: url('http://icons.iconarchive.com/icons/gakuseisean/ivista-2/24/Files-New-File-icon.png');
}
#header_nav_menu a.btn_page {
background-image: url('http://icons.iconarchive.com/icons/dryicons/aesthetica-2/24/page-icon.png');
}
/* Dropdown content (hidden by default) / Contenido del dropdown escondido por default*/
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 50%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown_area {
padding: 0px 13px 25px 13px;
background-repeat: no-repeat;
cursor: pointer;
background-image: url('http://icons.iconarchive.com/icons/double-j-design/super-mono-3d/24/button-dropdown-icon.png');
float: left;
}
/* Show the dropdown menu on hover / Muestra del dropdwon al colar el mouse sobre el botón*/
.dropdown_area:hover .dropdown-content {
display: block;
margin-top: 25px;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: gray;
padding: 10px;
color: white;
}
h3 {
padding: 5px;
}
/* Create two equal columns that floats next to each other / Crear dos columnas iguales que flotan una junto a la otra */
.column {
font-size: 14px;
float: left;
width: 50%;
background-color: #ccc;
height: 100px;
}
/* Style links inside the columns / Estilos para los enlaces dentro de columnas */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover / Añade color a los enlaces cuando se pone el mouse encima */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns / Limpia los floats despues de las columnas */
.row:after {
content: "";
display: table;
clear: both;
}
Conclusión.
Si llegó hasta este punto es porque seguramente ha hecho un buen trabajo, siéntase libre de jugar con este pequeño ejemplo, me encantaría ver sus resultados así que no dude en compartirlos.
Enlaces de interes:
Aquí algunos libros que le pueden ayudar:
Emmanuel Herrera
IT professional with several years of experience in management and systems development with different goals within public and private sectors.
Emmanuel worked through development and management layers, transitioning from developer and team development leader to Project Manager, Project Coordinator, and eventually to Scrum Master, Product Owner, and Agile Coach.
Some certifications include: PSM, PSPO, SSM.
