Hoy vamos a tener todo tipo de diversión. Primero, crearemos un menú animado usando un nuevo CSS3 brillante mientras aprendemos a implementar pseudo selectores de una manera práctica en un proyecto real. Luego seguiremos cómo construir lo mismo sin pseudo selectores para un mejor soporte del navegador. Finalmente, terminaremos con un vistazo a cómo desechar todo ese CSS de lujo en favor de algunos jQuery pasados de moda.
¡Únase a nosotros para examinar no una, sino tres formas de abordar un menú de navegación deslizante de CSS!
¿Por qué pseudo selectores?
Uno de los propósitos principales de este artículo es ilustrar un ejemplo del mundo real para el uso de pseudo selectores que no es el tutorial de tabla obvio.
Los pseudo selectores reciben un gran despliegue publicitario en los blogs de diseño, pero cuando llega el momento de los comentarios, siempre veo la misma pregunta: "Genial, pero ¿cuándo usaré estos realmente?" A veces nos encontramos con ejemplos ridículos y poco realistas solo para mostrar un juguete nuevo, mientras que los lectores lo marcan inmediatamente como algo "limpio". Pero no todo lo que sea práctico.
Nuestro menú de navegación de hoy incluirá solo un par de pseudo selectores de una manera muy rápida, que es exactamente cómo usarás a estos tipos en el futuro.
¿Qué estamos construyendo?
El objetivo aquí es crear un menú de navegación CSS simple compuesto de bloques rectangulares con un fondo rojo. Cuando el usuario se desplace sobre el elemento del menú, habrá una animación deslizante y cambiarán tanto el mensaje como el color de fondo del elemento del menú.
Es casi como un efecto de apertura de puerta de garaje aplicado a través de animaciones CSS. Es un proyecto divertido y el efecto final se ve genial.
Paso Uno: El HTML
Nuestra estructura HTML es muy breve, solo un div que contiene una lista desordenada con tres elementos de lista. Los elementos de la lista pueden parecer un poco extraños a primera vista, cada uno no tiene uno sino dos enlaces, uno justo después del otro. Echale un vistazo:
Cada elemento de la lista representa un elemento de navegación. Cada elemento de navegación tiene dos estados distintos: predeterminado y activo. Los dos enlaces representan cada estado. Observe cómo, al pasar el mouse, cambié los mensajes pasivos a una llamada a la acción: ¿Acerca de? se convierte en "Meet Us", esto sutilmente ayuda a fomentar el comportamiento del clic.
Eso es realmente todo el HTML que necesitamos para esta ronda. Ya puede empezar a pensar en cómo dirigiría cada enlace en el elemento de la lista de manera diferente. Sería bastante difícil sin nuestros amigos pseudo selector.
Paso 2: Menú de Inicio CSS
Para comenzar el CSS, tendremos que diseñar el área del menú como un todo. Cada elemento del menú tendrá 100px de alto por 200px de ancho y tendremos tres de ellos. Eso nos da un área total de 100px por 600px para el menú en su conjunto. Agregue diez píxeles de relleno para cada uno de los tres elementos y nuestro total general se convertirá en 100px por 630px.
Después de configurar la altura y el ancho, simplemente centré el menú junto con su texto y oculté el desbordamiento, lo que será importante con la animación más adelante.
Paso 3: Estilo de los enlaces
A continuación, definimos la estética de los elementos del menú. Primero seleccionamos los elementos de la lista y los flotamos hacia la izquierda con algunos márgenes. Luego seguimos con un estilo de todos los enlaces en el menú.
Esencialmente convertimos cada enlace en un gran bloque rojo:
Observe que este estilo ha cortado efectivamente el segundo enlace en cada conjunto. Lo que sucede es que el segundo enlace en cada elemento de la lista se apila debajo del primero y simplemente se oculta. Si apagamos temporalmente? Desbordamiento: oculto? Esto se vuelve mucho más fácil de visualizar.
Paso 4: Cambiar los estilos de enlace secundario
Observe en la imagen de arriba que, aunque tienen un texto diferente, los enlaces superior e inferior son esencialmente idénticos. Cambiemos esto un poco para que la transición sea más notable. Para hacer esto, simplemente cambiamos el segundo cuadro de cada conjunto a negro y el texto a blanco.
La parte difícil es, ¿cómo apuntamos solo al segundo enlace? No incluimos nada en el HTML para diferenciar los dos: no hay clases, no hay ID, nada. ¡Aquí es donde esos oh pseudo selectores tan prácticos entran en juego! Usando pseudo selectores, podemos apuntar fácilmente a cualquier otro enlace mediante el uso de par o impar.
Este selector parece un poco complicado, así que vamos a ejecutarlo. Primero nos dirigimos al ID de menú, luego profundizamos en la lista desordenada y más específicamente en las etiquetas de anclaje en esa lista. A continuación, agregamos nuestro pseudo selector?: Nth-of-type (par) ?, que apunta solo al segundo enlace en cada uno de nuestros conjuntos de enlaces.
Ahora podemos agregar algunos estilos para diferenciarlos de los bloques rojos:
Ahora, si una vez más comentamos temporalmente? Desbordamiento: oculto? Podemos ver que nuestros enlaces tienen mucha más diferenciación.
Paso 5: Hover Slide Action
Ahora es el momento de definir la acción que tendrá lugar en el hover. Básicamente, queremos que el enlace rojo se deslice hacia arriba y fuera de la vista cuando el enlace negro aparezca.
Suena bastante fácil, pero una vez que realmente lo piensas, ¡esta acción se vuelve súper difícil! Queremos que el enlace superior se deslice hacia arriba cuando pasamos el cursor sobre el botón, pero como se desliza fuera de la vista, ya no se moverá sobre él, causando una acción realmente defectuosa.
Después de un pensamiento serio, llegué a la siguiente conclusión. Tenemos que apuntar a todo el elemento de la lista para el evento de desplazamiento, de esa manera, no importa si el enlace superior o inferior está a la vista, todo sigue funcionando. Sin embargo, a pesar del hecho de que pasar el cursor sobre el elemento de la lista debería desencadenar el evento, es realmente otra cosa, el primer enlace, lo que necesita moverse.
Traducir estos objetivos a CSS se ve así:
Muchas personas no se dan cuenta, pero no tiene que actuar sobre el elemento en el que estableció el estado de desplazamiento. Aquí estamos activando el desplazamiento en el elemento de la lista pero moviendo el primer elemento secundario (gracias, pseudo selector) de ese elemento, que en este caso será el enlace superior.
Para hacer que esta transición sea suave, revisamos el código del Paso 3 y agregamos algunas transiciones CSS3 agradables.
¡Terminado! Versión pseudo-selector
Con eso, nuestra primera versión está completa! Nuestras animaciones se ven muy bien y los pseudo selectores están haciendo el trabajo pesado para mantener nuestro marcado agradable y limpio.
Manifestación: Haga clic aquí para lanzar.
Descargar: Haga clic aquí para descargar las tres versiones.
Desechando los pseudo selectores
Personalmente, me encantan los pseudo selectores, los selectores de atributos y todos los demás elementos proporcionados por CSS3. El soporte es bastante bueno para ellos en general, ya que casi todos los principales navegadores funcionan, ¡incluido IE9!
Sin embargo, el peor navegador de la historia no iría y no sería un dolor en el cuello así, por supuesto, cualquier cosa más antigua que IE9 tendrá problemas con estos selectores. Dado que la mayoría de las personas acaban de desechar el soporte de IE6, es probable que nos falten muchos años para ignorar IE6 e IE7.
Si desea implementar este menú en un proyecto en vivo, probablemente sea una mejor idea seguir adelante y usar clases en su HTML en su lugar. Vamos a ver cómo funciona eso.
HTML
A la luz de nuestra decisión de deshacernos de nuestros pseudo selectores experimentales, tendremos que agregar una clase adicional para ayudar a identificar el primer enlace sin afectar el segundo en cada elemento de la lista. Aquí acabo de tirar en un top? clase en cada enlace que se encuentra en la parte superior.
CSS
Ahora, con este marcado adicional en su lugar, no necesitamos los pseudo selectores en nuestro CSS. Podemos simplemente usar clases en su lugar, que tienen soporte universal.
¡Terminado! Versión no pseudo-selector
Nuestra segunda versión está completa! Para aquellos de ustedes que no están interesados en pseudo selectores, aquí hay una versión sin ellos.
Manifestación: Haga clic aquí para lanzar.
Descargar: Haga clic aquí para descargar las tres versiones.
Usando jQuery para las animaciones
Como una alternativa final, podría desechar las animaciones CSS y realizar las mismas acciones con jQuery (o tal vez usar jQuery como alternativa a través de Modernizr).
Sobre la base de la versión anterior, sin pseudo-selector, desactive las animaciones CSS y agregue este bit de jQuery:
Como puede ver, esto lanzó el efecto de desplazamiento sobre el elemento de la lista y anima la transición como lo hicimos en CSS. Los resultados son casi idénticos y deberían funcionar en casi todos los navegadores si no tienen JavaScript deshabilitado.
Mi versión original de esto era un poco extravagante con repeticiones de animaciones, así que ¡un gran consejo para Adrian Pelletier que tiene un proyecto similar que me recordó a lanzar la función de parada jQuery!
¡Terminado! Versión jQuery
Nuestra versión final utiliza la misma estructura que la anterior, pero lanza las transiciones CSS a favor de jQuery. Echar un vistazo.
Manifestación: Haga clic aquí para lanzar.
Descargar: Haga clic aquí para descargar las tres versiones.
Conclusión
Este tutorial le dio no uno, sino tres métodos diferentes para lograr el mismo menú animado deslizable. La primera versión ilustra perfectamente la utilidad de los pseudo selectores en proyectos reales. El segundo desecha los pseudo selectores para aquellos que buscan una versión más compatible. La versión final usa jQuery para las animaciones en lugar de las transiciones CSS3.
¡Deje un comentario a continuación y díganos qué versión usaría en su sitio hoy o cómo lo modificará!