Foros del Web - Ver Mensaje Individual - Cómo hacer una barra de menú como la de facebook?

Naahuel · #2 (**permalink**) 07/09/2011, 22:02

Primero tenés que asegurarte que los elementos body y html no tengan el margen y el padding que el navegador les agrega:

Código CSS:

Ver originalbody, html{
margin:0;
padding:0;
}

Yo suelo usar un reset.css para este tipo de cosas.

Después tenés que definir tu barra fuera del contenedor general de tu sitio, que puede tener dimensiones limitadas. Algo así:

Código HTML:

Ver original<html>
<head>...</head>
<body>
 
<div id="barra_superior"></div>
<div id="contenedor">
 
...
 
</div>
 
</body>
</html>

Después, basta con estilizar un poco tu barra. Por ejemplo:

Código CSS:

Ver original#barra_superior{
background:#000;
color:#FFF;
min-width:960px;
}

No es necesario especificar un ancho, ni siquiera uno del 100%. Los elementos de bloque ya se adaptan al ancho. El min-width es para que la barra no tenga nunca menos de 960px (por ejemplo).

Lo que resta es estilizar lo que esté DENTRO de la barra. Esto ya es personal, pero seguro usarás posicionamientos y flotados.