Crear una barra al estilo de Facebook

lunes, enero 04, 2010
COMPARTE EL POST

barra-facebook

En Ribosomatic se lanzaron a crear una barra similiar a la de Facebook con puro CSS, no se podrán sacar las ventanitas como las de “Aplicaciones” o “Chat” pero si vale la pena para quienes les gusta tener opciones visibles y quieren que el usuario no se sienta opacado por dicha opción, yo les traigo el código para configurarlo y probarlo en su sitio.
Links : demo, descargar

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



/*------- 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>

¡Síguenos en Twitter!


Deja tu comentario