Foros del Web » Creando para Internet » CSS »

Copiar la nav bar de Twitter!

Estas en el tema de Copiar la nav bar de Twitter! en el foro de CSS en Foros del Web. Buenas, he buscado por el foro pero no he visto ningun ejemplo igual a lo que ando yo buscando... Esto en vez de una consulta ...
  #1 (permalink)  
Antiguo 24/07/2011, 02:41
Avatar de Pixeltwo  
Fecha de Ingreso: mayo-2011
Mensajes: 32
Antigüedad: 5 años, 9 meses
Puntos: 1
Copiar la nav bar de Twitter!

Buenas, he buscado por el foro pero no he visto ningun ejemplo igual a lo que ando yo buscando...

Esto en vez de una consulta es mas bien algo asi como un reto, porque sencillamente yo no he sido capaz ( hasta ahora ).

El reto consiste en copiar el efecto que crea twitter en la navigation bar... resulta que si, a simple vista esa barra está en position:fixed.. pero un fixed a la hora de scroll no hace caso... ¿Qué solucion puede tener esto? " a lo mejor hay algo de lo que no estoy enterado "....


A mi dado el grado de desesperacion, lo maximo que se me ocurre ya es hacerlo con Jquery afectando sus valores css... pero es un poco " raro " y aun no me acaba de cuajar la idea en la cabeza..


Hasta el momento he venido usando unicamente CSS en esto.
Hagan la prueba, coloquen la ventana en twitter, hagan scrooll horizontal (poned la ventana mas pequeña logico) y vereis como ese div ( el supuesto Fixed ) tambien se mueve... y mirando por encima en las propiedades css de la hoja de twitter, hay 3 Divs:

Cita:
[-> 1 (el que está fixed ).
-> 2 ( div al medio, lo cual parece usar un text-align:center[yo suelo usar el margin-left; margin-right: auto para esto...).
-> 3 (otro div en esta ocasion text-align:left).
Por el momento no he podido descubrir mas... hice el intento por mi cuenta pero no funciona



Espero alguien milagroso pueda dar con la solución!!

Muchisimas Gracias!
Un fuerte abrazo
  #2 (permalink)  
Antiguo 24/07/2011, 02:50
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: Copiar la nav bar de Twitter!

Buenas.
A lo mejor en tu navigator bar, te olvidaste poner la propiedad:

display: scroll;

Aun asi deberias poner un poco de código para ver cual seria el fallo.

Saludos
  #3 (permalink)  
Antiguo 24/07/2011, 03:55
Avatar de Pixeltwo  
Fecha de Ingreso: mayo-2011
Mensajes: 32
Antigüedad: 5 años, 9 meses
Puntos: 1
Respuesta: Copiar la nav bar de Twitter!

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <style type="text/css">
  3. body{
  4.     margin:0px;
  5.     background-color:gold;
  6.     }
  7.    
  8. /*Div fixed*/  
  9. #a1{
  10.     background-color:white;
  11.     width:100%;
  12.     position:fixed;
  13.     top:0;
  14.     left:0;
  15.     height:80px;
  16.     z-index:20;
  17.     margin:0px;
  18.     }
  19. /*Contenido dentro del div fixed*/ 
  20. #a2{
  21.     position:relative;
  22.     text-align:center;
  23.     color:#fafafa;
  24.     width:910px;
  25.     background-color:blue;
  26.     margin-left:auto;
  27.     margin-right:auto;
  28.    
  29.     }
  30. /*div contenedor principal*/
  31. #a3{
  32.     margin-left:auto;
  33.     margin-right:auto;
  34.     width:910px;
  35.     min-height:700px;
  36.     margin-top:100px;
  37.     background-color:#fafafa;
  38.     }
  39. /*contenido dentro de contenedor*/ 
  40. #a4{
  41.     color:#000;
  42.     font-size:16px;
  43.     margin-left:30px;
  44.     margin-right:30px;
  45.     }
  46. </head>
  47.  
  48. <div id="a1"><!--El reto es conseguir que este div se mueva a la vez que el contenedor cuando se hace scroll horizontal al poner la ventana del navegador mas pequeña o mismamente usar un monitor con baja resolución.-->
  49.     <div id="a2">Esto tiene que estar centrado</div>
  50. </div>
  51. <div id="a3">
  52.     <div id="a4">Contenido aqui...</div>
  53. </div>
  54.  
  55. </body>
  56. </html>

No es mas que un codigo que he hecho para la cuestión, no el que ando desarrollando (claramente).


Está comentada esa parte que tanto menciono.. por el momento sigo probando y pensando, pensando pero nada... CSS me limita... estoy empezando a pensar que en twitter han usado javascript...
Saludos!
  #4 (permalink)  
Antiguo 24/07/2011, 04:09
Avatar de Pixeltwo  
Fecha de Ingreso: mayo-2011
Mensajes: 32
Antigüedad: 5 años, 9 meses
Puntos: 1
Respuesta: Copiar la nav bar de Twitter!

Definitivamente me retraigo, no creo que haya nada posible en CSS para que esas dos cosas coordinen, tocó irse por Jquery de modo que a la hora de mover el scroll se mueva ese contenido del div.. no hay otra !!
  #5 (permalink)  
Antiguo 24/07/2011, 04:19
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: Copiar la nav bar de Twitter!

Twiter debe de usar sus cosas, pero ese navigator tambien se puede hacer con CSS.

Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  <head>
  3.   <title> New Document </title>
  4.   <meta name="Generator" content="EditPlus">
  5.   <meta name="Author" content="">
  6.   <meta name="Keywords" content="">
  7.   <meta name="Description" content="">
  8.  </head>
  9. <div style="display: scroll; position: fixed; border: 1px black; color: white; top: 0px; background: black; width: 1990px;">Navegador</div>
  10.  <body>
  11. Cuerpo de tu página
  12.  </body>
  13. </html>

Con este Script ya puedes conseguir lo mismo que Twiter, editandolo a tu manera claro.
Tan solo con poner el div antes del Body y asignandole esas propiedades ya estará echo.
Luego ya seria hacer que tu página tengo tanto contenido posible como para usar el scroll.

Espero haberte ayudado.
Saludos.
  #6 (permalink)  
Antiguo 24/07/2011, 04:25
Avatar de Batan  
Fecha de Ingreso: septiembre-2010
Ubicación: Madrid
Mensajes: 408
Antigüedad: 6 años, 6 meses
Puntos: 63
Respuesta: Copiar la nav bar de Twitter!

Perdona creo que ya entendi a lo que te referias, lo siento.
Pues vere haber.
  #7 (permalink)  
Antiguo 24/07/2011, 11:37
Avatar de Pixeltwo  
Fecha de Ingreso: mayo-2011
Mensajes: 32
Antigüedad: 5 años, 9 meses
Puntos: 1
Respuesta: Copiar la nav bar de Twitter!

Bien jeje! :)

Bueno he encontrado un plugin que parece mover un div en base al scroll, no obstante lleva una animación en si, por ende, suspenderé la animacion y veremos que ocurre..

Postearé cuando lo consiga!!

Saludos

Etiquetas: bar, navigation, twitter
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:28.