[SOLUCIONADO] Cómo hacer una barra de menú como la de facebook?

Bonzohere · #1 (**permalink**) 07/09/2011, 19:33

Hola eternos salvadores,

Estoy desarrollando un sitio, controlo dentro de todo bien php y javascript ahora, además de html, y de css sé cosas básicas.

Alguien sabría como definir el background sólo a la barra de menú de mi página y que dicho background ocupe todo el largo del navegador (cuando le hago zoom off también)? Quiero hacer algo tal cual como la de twitter, facebook o mismo como la del foro también.

Muchas gracias.

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.

Naahuel · #3 (**permalink**) 07/09/2011, 22:29

De aburrido nomás, hice un ejemplo:
http://jsbin.com/owewef

Código:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<style>
  /* reset del body y el html*/
  body,html{margin:0; padding:0;}
  body{font-family:Helvetica, Arial, sans-serif; font-size:14px;}
  /* barra superior */
  #barra_superior{
    padding:5px 20px;
    background:#080808;
    font-size:12px;
    color:#FFF;
    -webkit-box-shadow: 0px 0px 8px 1px rgba(0 ,0 , 0, 0.3);
    -moz-box-shadow: 0px 0px 8px 1px rgba(0 ,0 , 0, 0.3);
    box-shadow: 0px 0px 8px 1px rgba(0 ,0 , 0, 0.3);
    margin-bottom:20px;
    overflow:hidden;
    min-width:920px;
  }
  #barra_superior ul{
    list-style:none;
    padding:0; margin:0;  
    float:left;
  }
  #barra_superior ul li{
    float:left;
    padding:2px; margin:0;
  }
  #barra_superior a{
    display:block;
    height:20px;
    line-height:20px;
    padding:0 5px;
    text-decoration:none;
    color:#FFF;
    border-radius:5px;
  } 
  #barra_superior a:hover{
    color:#000;
    background:#EFF;
  }
  #barra_superior .info-usuario{
    float:right;
  }
   
  
  /* contenedor */
  #contenedor{
    width:940px;
    padding:10px;
    background:#EFF;
    margin:0 auto;
    border-radius:10px;
    -webkit-box-shadow: 0px 3px 8px 1px rgba(0 ,0 , 0, 0.3);
    -moz-box-shadow: 0px 3px 8px 1px rgba(0 ,0 , 0, 0.3);
    box-shadow: 0px 3px 8px 1px rgba(0 ,0 , 0, 0.3);
  }
  
</style>
</head>
<body>
  <div id="barra_superior">
    <ul class="navegacion">
      <li><a href="#">Inicio</a></li>
      <li><a href="#">Acerca de nosotros</a></li>
      <li><a href="#">Servicios</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
    <div class="info-usuario">
    <ul class="navegacion">
      <li><a href="#">Usuario</a></li>
      <li><a href="#">Notificaciones</a></li>
      <li><a href="#">Salir</a></li>
    </ul>
    </div>
  </div>
  <div id="contenedor">
    <h1>HTML Ipsum Presents</h1>
           
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
 
<h2>Header Level 2</h2>
           
<ol>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ol>
 
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
 
<h3>Header Level 3</h3>
 
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
</ul>
  </div>
</body>
</html>