Barra inferior tipo Facebook con CSS

by yuslinan Posted on November 24, 2009

Para los que lo pedian, realice una pequeña imitación de la barra inferior donde se cuelgan las aplicaciones, chat y notificaciones en Facebook. El desarrollo es muy sencillo y limitado, como para mejorarlo luego y darle alguna buena utilidad en alguna aplicación nuestra. Luego me gustaria complementarla con tooltip y menus.

Estructura CSS básica:

El ancho del contenedor es 100 % y estará posicionado en la parte inferior inamovible. Dentro otro contenedor ya con la barra en sí.

#taskbar{
	height:25px;
	width:100%;
	margin:auto;
	
	position: fixed;
	bottom: 0;
	z-index: 99;
}
#taskbar #container{
	background-color:#E5E5E5;
	border:1px solid #B5B5B5;
	display:block;
	margin-left:15px;
	margin-right:15px;
	height:25px;
}

También especificamos los grupos de botones, para nuestro ejemplo 3:

/*------- blocks btns --------*/
#taskbar #container .block-left{
	position:relative;
	float: left;
	width:10%;
	height:25px;
	
	border-right:1px solid #B5B5B5;
}
#taskbar #container .block-center{
   	position: relative;
   	float: left;
   	width: 50%;
	height:25px;
	
	border-right:1px solid #B5B5B5;
}
#taskbar #container .block-right{
   	position: relative;
  	float: left;
   	width: 25%;
	height:25px;
	
	border-right:1px solid #B5B5B5;
}

Finalmente una clase para cada botón, que por lo general serán vinculos de enlaces.

#taskbar #container .btns{
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	padding:3px;
	display:inline-block;
	vertical-align:middle;
	line-height:14px;
}

En la parte HTML

Agregamos un div en la parte inferior del HTML, con las clases especificadas en la hoja de estilos. En el ejemplo práctico propuesto es este:

<div id="taskbar">
	<div id="container">
    	<div class="block-left">
    		<a href="" class="btns">Aplicaciones</a>
        </div>
        <div class="block-center">
        	<a href="" class="btns"><img src="../img/application.png" class="alignleft" alt="aplicacion" /></a>
        	<a href="" class="btns"><img src="../img/calculator.png" class="alignleft" alt="aplicacion" />Twitter</a>
            <a href="" class="btns"><img src="../img/clock_red.png" alt="aplicacion" /></a>
            <a href="" class="btns"><img src="../img/zoom.png" alt="aplicacion" /></a>
        </div>
		<div class="block-right">
    		<a href="" class="btns"><img src="../img/group.png" class="alignleft" alt="chatroom" />Chat Room (0)</a>
        </div>
    </div>
</div>

Funciona correctamente en la mayoría de navegadores, salvo IE6 que ya no debe existir.

Links : demo, descargar

22 thoughts on “Barra inferior tipo Facebook con CSS”

pool says:

November 28, 2009 at 12:50 pm

hola
justo lo que esta buscando
espero que lo sigas desarrollando
lo voy adescargar a ver que pudeo hacer
excelente
sigue asi
pool

Reply
Carlos says:

December 1, 2009 at 6:53 am

Hola
Vale por el aporte
pero tampoco funciona en IE8

Reply
jesusvld says:

December 1, 2009 at 7:57 am

Si ve corrrectamente sobre IE8, yo lo he probado y comprobado.
mmm que raro!

Reply
Alejandro Gonzalez says:

December 1, 2009 at 4:33 pm

Orale k bien nadbaba buscando algo asi desde hacia tiempo, intente por medio de popups y javascript y nada, gracias muya gradecido con este aoporte…. saludos!!!

Reply
juan calles says:

December 3, 2009 at 10:55 am

Excelente Gracias..

Reply
javi says:

December 11, 2009 at 5:57 am

Hola
Gracias por el componente, solo una cuestión, en la demo si haces scroll hasta el final de la página la taskbar oculta el texto al final de la página

Reply
jesusvld says:

December 11, 2009 at 7:58 am

Se tendría que ampliar el margen inferior del div principal.
Saludos.

Reply
charliec114 says:

December 14, 2009 at 5:50 am

muy bueno, espero con ansias la posibilidad de menues desplegables, para usarlo en el chat ;), saludos!

Reply
charliec114 says:

December 14, 2009 at 5:51 am

por cierto te agrego a mis feeds rss, saludos!

Reply
Dracox3 says:

January 5, 2010 at 5:30 am

Muy bueno… se agradece

Reply
Luis says:

January 20, 2010 at 11:18 am

muey bueno, funciona perfecto, como habria q hacer para agregarle los menues?? por ejemplo cuando das clik en algun icono q se despliegue un menu para arriba como hace en facebook, gracias!

Reply
zimri says:

April 9, 2010 at 8:43 pm

hola yo trabajo en joomla i no me funciona …….

Reply
Ultimate Corporation says:

July 12, 2010 at 4:42 pm

Nos Gustaria Que Hicieran Posible Tambien Disponible La Barra En HTML!
Gracias Por Su Atencion
Ultimate Corp.

Reply
Isaac Trenado perea says:

August 9, 2010 at 4:33 am

No chingués como html. Va poder hacer eso necesitas aguevo. CSS. Pero si lo logras me avisan

Reply
FOGOBOOK says:

August 31, 2010 at 1:07 pm

HOLA YO TRABAJO CON WEBS , COMO SERIA PARA INCERTARLO , Y NO ENTIENDO COMO Y DONDE VA TODO ESO , GRACIAS SI ME PUEDES ENVIAR UN CORREO fogobook@gmail.com

Reply
Daniel says:

September 3, 2010 at 7:32 am

Muy bueno pero alguna solucion para que los embeds no pasen por ensima de la barra

Reply
lordmaul says:

September 16, 2010 at 8:34 am

Y como hago para crear un listado de links (menu) cuando pique en aplicaciones?

Aplicaciones

Y alguien sabe como hago para que se pueda minimizar la barra pero para todo el tiempo que visites la web?

Reply
escorts says:

February 17, 2011 at 11:33 am

yo voy a usarlo en Citas Escorts, http://www.citasescorts.com ya iré contando como va, por cierto hay alguna demo por ahí?

Reply
facundo says:

June 12, 2011 at 11:32 am

alguna solucion para hacerlo andar con ie8?
saludos y muy bueno

Reply
Samuel says:

October 20, 2011 at 4:55 pm
estuve culminando mas o menos el menu para que se desplegaran opciones al poner el cursor sobre “Aplicaciones”.. me quedo asi:
Codigo CSS:
/*TaskBar & TaskBar Container*/
#taskbar
{
height:25px;
width:100%;
margin:auto;
position:fixed;
bottom:0;
z-index:999;
}
#taskbar #container
{
background-color:#E5E5E5;
border:1px solid #B5B5B5;
display:block;
margin-left:15px;
margin-right:15px;
height:25px;
}
/*End TaskBar & TaskBar container*/
/*Buttons*/
#taskbar #container .block-left
{
position:relative;
float:left;
width:10%;
height:25px;
border-right:1px solid #B5B5B5;
}
#taskbar #container .block-center
{
position:relative;
float:left;
width:50%;
height:25px;
border-right:1px solid #B5B5B5;
}
#taskbar #container .block-right
{
position:relative;
float:left;
width:25%;
height:25px;
border-right:1px solid #B5B5B5;
}
/***************************************************************/
#taskbar #container .btns
{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
padding:3px;
display:inline-block;
vertical-align:middle;
line-height:14px;
position:relative;
text-decoration:none;
color:#333;
}
#taskbar #container .btns:hover
{
z-index:999;
background-color:#F4F4F4;
}
#taskbar #container .btns span
{
display:none;
}
#taskbar #container .btns:hover span
{
display:block;
position:absolute;
top:-2.5em; left:0em;
width:250px;
padding:5px;
background-color:#0080C0;
color:#FFFFFF;
cursor:default;
}
/****************************************************************/
/*End Buttons*/
Codigo HTML:

Documento sin título

Realizaremos un sencillo ejemplo de como recuperar registros de una tabla con AJAX.

Este ejemplo lo he probado en IE, Firefox, Opera y Netscape sin darme errores.

Es un ejemplo sencillo si estamos familiarizados con PHP y MySQL.Aún así dare algunas explicaciones generales sobre el código.

Creacion de la tabla

Entonces empezemos creando un tabla pequeña llamada empleados, no tendrá mas que 5 campos: idempleado, nombres, departamento y sueldo; además insertaremos algunos datos.
```
CREATE TABLE empleados (     		idempleado int NOT NULL auto_increment,  		nombres varchar(32) NOT NULL,  		departamento varchar(40)NOT NULL,  		sueldo double,  		KEY id(idempleado) )   TYPE=MyISAM;          INSERT INTO empleados VALUES (1, 'Juan Perez', 'Informatica',500.00);  INSERT INTO empleados VALUES (2, 'Laura Morales', 'Contabilidad',550.00);  INSERT INTO empleados VALUES (3, 'Luis Gutierrez', 'Administracion',850.00);  INSERT INTO empleados VALUES (4, 'Pedro Solar', 'Informatica',500.00);  INSERT INTO empleados VALUES (5, 'David Vilchez', 'Contabilidad',550.00);  
```
Creamos las funciones en javascript

Ahora escribiremos 2 funciones, en la primera ( objetoAjax ) tiene como objetivo elegir el objeto XMLHttpRequest dependiendo del navegador, y la segunda función ( MostrarConsulta(parametro) ) tendrá como objetivo pedir los datos y mostrarlos en una capa (<div>) que especificaremos. Estas funciones lo podemos incluir en un archivo javascript (.js) al cual llamaremos ajax.js

ajax.js
```
function objetoAjax(){  	var xmlhttp=false;  	try {  		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");  	} catch (e) {  		try {  		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");  		} catch (E) {  			xmlhttp = false;    		}  	}    	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {  		xmlhttp = new XMLHttpRequest();  	}  	return xmlhttp;  }    function MostrarConsulta(datos){  	divResultado = document.getElementById('resultado');  	ajax=objetoAjax();  	ajax.open("GET", datos);  	ajax.onreadystatechange=function() {  		if (ajax.readyState==4) {  			divResultado.innerHTML = ajax.responseText  		}  	}  	ajax.send(null)  }
```
Pedir los datos con PHP

En esta parte escribiremos un script en PHP para realizar una consulta de todos los registros de la tabla empleados en la base de datos.

consulta.php
```
<?php  //Configuracion de la conexion a base de datos  $bd_host = "localhost";   $bd_usuario = "root";   $bd_password = "";   $bd_base = "ribosomatic";     $con = mysql_connect($bd_host, $bd_usuario, $bd_password);     mysql_select_db($bd_base, $con);     //consulta todos los empleados    $sql=mysql_query("SELECT * FROM empleados",$con);    //muestra los datos consultados  echo "</p>Nombres - Departamento - Sueldo</p> n";  while($row = mysql_fetch_array($sql)){  	echo "<p>".$row['nombres']." - ".$row['departamento']." - ".$row['sueldo']."</p> n";  }  ?>
```
Formulario de consulta

Finalmente creamos un archivo html que contendrá un Form y un Button el cual realizará la consulta.

consulta_empleados.html
```
<html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Consulta Registro con AJAX</title>
      
      <script language="JavaScript" type="text/javascript" src="ajax.js"></script>
      </head>
        <body>
      <p>Consultar registros con ajax</p>"</p>"<p>
        <form name="consulta" action="" onsubmit="MostrarConsulta('consulta.php'); return false">      <label>
    <input type="submit" value="Consultar" />
      </label>
    </form>
    <div id="resultado"></div>
    </body>
  </html>
```
En resumen

Para consultar los datos de una tabla hemos realizado lo siguiente:
- Una función para crear el objeto XMLHttpRequest dependiendo del navegador.
- Una función que realizará la petición de datos e indicará donde se mostrarán estos.
- Una script en PHP que consulta los datos y los muestra.
- Y finalmente el formulario de consulta.
Como podrán apreciar el código es realmente sencillo de entender, aún así daré mas detalles si preguntan. Pueden descargar el archivo si desean. Hasta otra oportunidad.

Aplicaciones

Contenido de Aplicaciones
Reply
Luis says:

November 15, 2011 at 9:28 am

que fino

Reply
J.Bañuelos says:

September 28, 2012 at 8:01 pm

Buena barra, gracias me será de utilidad 😀

Reply