Normalmente, los desarrolladores web han estado usando JavaScript para crear animaciones de página dinámicas. Los menús ocultos y la subnavegación son solo algunos ejemplos de cómo se usarían estas técnicas en un sitio web en vivo. Gracias a la adición de transiciones CSS3 ahora podemos imitar estas animaciones, sin JavaScript a la vista.
En este tutorial, quiero mostrar cómo construir una barra de contenido oculto interior que se desliza hacia abajo cuando se desplaza. Puede colocar esto en su encabezado, pie de página o incluso en algún lugar dentro del contenido de la página. Es una técnica muy flexible que no requiere mucho tiempo para ponerse a trabajar. Además, todos los navegadores web modernos soportarán los efectos de transición de CSS3.
Demo en vivo - Descargar código fuente
Creando el HTML
La página principal index.html es muy sencilla y no necesitamos incluir bibliotecas alternativas. jQuery ni siquiera es necesario a menos que quieras usar otros complementos. Guardaré todos los códigos CSS de la página web principal dentro de un documento llamado estilos.css.
Ahora para obtener la barra div oculta para expandirse al pasar el mouse, necesitamos tener esto anidado dentro de la barra superior principal. Cuando un usuario coloca un elemento en jQuery, podemos forzar a otro elemento interno a permanecer abierto con él. Sin embargo, cuando se utilizan transiciones CSS3, crean eventos de desplazamiento y eventos de no desplazamiento de forma inmediata. Tan pronto como el usuario mueva su cursor lejos de la barra superior, ocultará el div de inmediato a menos que esté anidado en el interior.
Así que he creado un nuevo div con el ID #tophiddenbar. Esta anidado dentro #barra superior porque como elemento secundario, mantendrá el estado de hover para todos los elementos. Sobrevuelo sobre la barra oculta ahora también es aparte #barra superior y por lo tanto, las transiciones de CSS no se ocultarán inmediatamente antes de que pueda leer o hacer clic en los enlaces. No me molesté en usar una lista desordenada para los enlaces, pero obviamente esta sería la mejor práctica al crear sus propias sub-navegaciones HTML.
Documento CSS
Normalmente, tenemos los mismos restablecimientos y estilos de documentos que otros tutoriales similares. Sin embargo, hay algunas actualizaciones a la #barra superior Elemento que es crucial para que esto funcione. A saber, necesitamos el desbordamiento: oculto propiedad para asegurarse de que el contenido adicional no se mostrará después de que se cargue la página. Necesitará usar esto en su propio elemento contenedor para que el div oculto no se muestre al principio, luego aumentamos el valor de altura a través de una transición.
Si está familiarizado con las transiciones CSS, entonces no debería ser difícil de entender. Básicamente, configuramos un período de tiempo para que ocurra la animación, junto con las propiedades donde necesitamos efectos de transición. No es necesario incluir todos los restablecimientos de CSS como lo he agregado anteriormente. Solo son importantes para esta demostración, y pueden ofrecer un punto de partida alternativo a diferencia de otras bibliotecas como Twitter Bootstrap.
Animando el menu
La propiedad de transición real se aplicará al elemento #topbar ya que estamos animando el valor de altura. Estoy usando una altura fija de 36px que aumenta para mostrar el div oculto interior. Y recuerde que inicialmente este div puede mostrarse dentro del orden de la página, solo está oculto debido a la propiedad de desbordamiento en el contenedor #barra superior elemento.
Al desplazar la barra de herramientas superior, se expandirá hasta 60px de altura. Este es suficiente espacio para mostrar nuestra nueva sub-navegación con enlaces a las páginas de Design Shack. Este diseño típico es realmente fácil de encajar en cualquier otro proyecto que tenga. Siempre que el fondo se pueda alargar verticalmente, se puede utilizar como elemento contenedor.
Las propiedades de transición de CSS3 también tienen dos prefijos de proveedores utilizados en los motores de representación de Mozilla y Webkit. los lineal palabra clave es solo un tipo de estilo de animación que se puede omitir para el valor predeterminado. Esto se denomina propiedad de función de tiempo de transición y tiene un número selecto de valores alternativos que puede probar. De cualquier manera, esta animación es perfecta para cualquier sitio web que necesite mantener un poco de contenido oculto en la página.
Demo en vivo - Descargar código fuente
Conclusión
Notarás que esta técnica implementa algunas técnicas CSS que son más nuevas en el espectro. Sin embargo, no es nada demasiado confuso para los desarrolladores web frontend típicos. Hay otros métodos posibles, como el uso de posicionamiento absoluto anidado dentro de un contenedor externo. Tener ambos divs uno al lado del otro en el HTML a veces puede perder el enfoque cuando se desplaza sobre el elemento oculto, por lo que es mejor mantenerlos dentro. Siéntase libre de compartir cualquier otra idea o pregunta sobre este tutorial en el área de discusión posterior.