0

Mi idea es imitar esta navbar: http://tinagauff.de/

Exactamente igual de ser posible, no logré entender su source code, no tanto porque sea complejo sino que maneja muchos "data" que no sé de donde vienen.

Cosas que me interesaron:

  • Su logo cambia de color con el scroll (intenté hacerlo con el skrolls y no lo logré)
  • La navbar se muestra solo cuando el mouse está en determinado sector y vuelve a ocultarse cuando el mouse sale de ahí (probé con mouseenter, pero no lo logré)
  • Me gustaría que cuando la navbar se muestre, tenga esa animación de dropdown (no probé ya que no logro ocultar/mostrar la navbar)
1

1 respuesta 1

2

En la Web que muestras se resuelve mediante puro CSS. Hay una capa que contiene el icono del menú y el H1 del título. Esa capa tiene este css:

nav.slide:hover {
        top: 0;
        border-bottom: 40px solid rgba(255, 255, 255, 0);
}

nav.slide {
     position: fixed;
     left: 0;
     top: -175px;
     right: 0;
     border-bottom: 100px solid rgba(255, 255, 255, 0);
     z-index: 999;
}

Como puedes ver, el div que contiene ambas cosas tiene una posición por defecto que lo sitúa por encima de la visual de la web, fuera de la pantalla (top: -175px;) y un borde inferior con un grosor de 100px para que pueda producirse el evento:hover cuando pases con el ratón sobre la capa aunque esté oculta (No se ve el contenido, pero el borde está ahí) al ponerte encima le asigna un top: 0 y reduce el borde. El color blanco viene de la UL que contiene el menú en el interior del nav. Te lo he resumido todo en este fiddle:

https://jsfiddle.net/ygy14jfy/

Si lo miras bien, verás que hay también un efecto de animación en el propio CSS para que al posicionarte sobre la capa, en lugar de aparecer bruscamente, aparezca desplazándose con delicadeza. Observa la variación del borde y la posición de la capa

Por si te preguntas porqué el H1 con el nombre y el icono del menú están visibles todo el tiempo pese a estar dentro de un div que está más arriba de la visual de la Web, date cuenta de que ambos tienen un posicionamiento fijo (fixed) y una posición con respecto al borde inferior de la pantalla de 76px (top: 76px), como NAV no tiene la propiedad overflow: hidden (Que haría que todo lo que sobresale de su área quedase oculto), entonces estos elementos pueden verse aunque no se vea el propio div.

3
  • Pero el color no es el mismo? Le esta asignando blanco en los dos. Igual gracias por el detalle, esa parte ya la estoy entendiendo.
    – Juan
    Commented el 7 ene. 2017 a las 18:47
  • He intentado mejorar la explicación y corregir algunas cosas, espero que te sirva. Tenías razón, el color no cambia, cambia el grosor del borde. Arriba te explico todo. Commented el 8 ene. 2017 a las 10:11
  • Excelente Ignacio, te agradezco mucho la respuesta!. Voy a intentar hacerlo a pesar de haber modificado mi idea, es un buen desafío.
    – Juan
    Commented el 9 ene. 2017 a las 1:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.