Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Cómo hacer una barra de menú como la de facebook? en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 07/09/2011, 19:33
 
Fecha de Ingreso: junio-2011
Ubicación: Argentina.
Mensajes: 17
Antigüedad: 12 años, 9 meses
Puntos: 0
Pregunta Cómo hacer una barra de menú como la de facebook?

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.
  #2 (permalink)  
Antiguo 07/09/2011, 22:02
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años
Puntos: 192
Respuesta: Cómo hacer una barra de menú como la de facebook?

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 original
  1. body, html{
  2. margin:0;
  3. padding:0;
  4. }

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
  1. <head>...</head>
  2.  
  3. <div id="barra_superior"></div>
  4. <div id="contenedor">
  5.  
  6. ...
  7.  
  8. </div>
  9.  
  10. </body>
  11. </html>

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

Código CSS:
Ver original
  1. #barra_superior{
  2. background:#000;
  3. color:#FFF;
  4. min-width:960px;
  5. }

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.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 07/09/2011, 22:29
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 13 años
Puntos: 192
Respuesta: Cómo hacer una barra de menú como la de facebook?

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

Código:
Código HTML:
Ver original
  1. <!DOCTYPE html>
  2.   /* reset del body y el html*/
  3.   body,html{margin:0; padding:0;}
  4.   body{font-family:Helvetica, Arial, sans-serif; font-size:14px;}
  5.   /* barra superior */
  6.   #barra_superior{
  7.     padding:5px 20px;
  8.     background:#080808;
  9.     font-size:12px;
  10.     color:#FFF;
  11.     -webkit-box-shadow: 0px 0px 8px 1px rgba(0 ,0 , 0, 0.3);
  12.     -moz-box-shadow: 0px 0px 8px 1px rgba(0 ,0 , 0, 0.3);
  13.     box-shadow: 0px 0px 8px 1px rgba(0 ,0 , 0, 0.3);
  14.     margin-bottom:20px;
  15.     overflow:hidden;
  16.     min-width:920px;
  17.   }
  18.   #barra_superior ul{
  19.     list-style:none;
  20.     padding:0; margin:0;  
  21.     float:left;
  22.   }
  23.   #barra_superior ul li{
  24.     float:left;
  25.     padding:2px; margin:0;
  26.   }
  27.   #barra_superior a{
  28.     display:block;
  29.     height:20px;
  30.     line-height:20px;
  31.     padding:0 5px;
  32.     text-decoration:none;
  33.     color:#FFF;
  34.     border-radius:5px;
  35.   }
  36.   #barra_superior a:hover{
  37.     color:#000;
  38.     background:#EFF;
  39.   }
  40.   #barra_superior .info-usuario{
  41.     float:right;
  42.   }
  43.    
  44.  
  45.   /* contenedor */
  46.   #contenedor{
  47.     width:940px;
  48.     padding:10px;
  49.     background:#EFF;
  50.     margin:0 auto;
  51.     border-radius:10px;
  52.     -webkit-box-shadow: 0px 3px 8px 1px rgba(0 ,0 , 0, 0.3);
  53.     -moz-box-shadow: 0px 3px 8px 1px rgba(0 ,0 , 0, 0.3);
  54.     box-shadow: 0px 3px 8px 1px rgba(0 ,0 , 0, 0.3);
  55.   }
  56.  
  57. </head>
  58.   <div id="barra_superior">
  59.     <ul class="navegacion">
  60.       <li><a href="#">Inicio</a></li>
  61.       <li><a href="#">Acerca de nosotros</a></li>
  62.       <li><a href="#">Servicios</a></li>
  63.       <li><a href="#">Contacto</a></li>
  64.     </ul>
  65.     <div class="info-usuario">
  66.     <ul class="navegacion">
  67.       <li><a href="#">Usuario</a></li>
  68.       <li><a href="#">Notificaciones</a></li>
  69.       <li><a href="#">Salir</a></li>
  70.     </ul>
  71.     </div>
  72.   </div>
  73.   <div id="contenedor">
  74.     <h1>HTML Ipsum Presents</h1>
  75.            
  76. <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>
  77.  
  78. <h2>Header Level 2</h2>
  79.            
  80. <ol>
  81.    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  82.    <li>Aliquam tincidunt mauris eu risus.</li>
  83. </ol>
  84.  
  85. <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>
  86.  
  87. <h3>Header Level 3</h3>
  88.  
  89. <ul>
  90.    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  91.    <li>Aliquam tincidunt mauris eu risus.</li>
  92. </ul>
  93.   </div>
  94. </body>
  95. </html>
__________________
nahueljose.com.ar

Etiquetas: menú, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:18.