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