Barra inferior tipo Facebook con CSS

22
5027

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.

Simple Barra Facebook

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 COMENTARIOS

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

  2. 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

  3. 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!

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

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

  5. 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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    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>
    <!-- referenciamos al archivo ajax.js donde se encuentra nuestra funcion objetoAjax-->
    <script language="JavaScript" type="text/javascript" src="ajax.js"></script>
    </head>
    <body>
    <p>Consultar registros con ajax</p>"</p>"<p><!-- En "onsubmit" escribimos la función 'MostrarConsulta' que creamos en javascript, con su parametro que es el archivo que vamos a mostrar, en este caso 'consulta.php'-->
    <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.


Comments are closed.