Comienza con el código de marcado de página
Empezaremos con una sencilla lista desordenada que representa un menú de página típico. Cada enlace de menú incluirá dos elementos span. El primero contendrá el texto ancla, mientras que el segundo contendrá un icono de Font Awesome:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | <ul class="menu"> <li> <a href="#0"> <span>About</span> <span> <i class="fas fa-address-card" aria-hidden="true"></i> </span> </a> </li> <li> <a href="#0"> <span>Projects</span> <span> <i class="fas fa-tasks" aria-hidden="true"></i> </span> </a> </li> ...</ul> |
Especificar los estilos
La lista estará constituida por un contenedor flexible cuyo contenido está centrado horizontalmente:
1 2 3 4 | .menu { display: flex; justify-content: center;} |
Nota: Este estilo base se añadirá a todas las demostraciones que vamos a construir, por lo que no lo volveremos a explicar. La demo también tiene algunos estilos con fines estéticos que reutilizaremos cada vez (como un fondo oscuro, etc.) y que puedes copiar desde la demostración en CodePen.
El primer span de cada elemento tendrá un poco de relleno (padding) a su alrededor:
1 2 3 4 | .menu a span:first-child { display: inline-block; padding: 10px;} |
A continuación, el segundo span estará posicionado de forma absoluta y oculto por defecto. Además, su icono estará centrado tanto horizontal como verticalmente:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 | .menu a { display: block; position: relative; overflow: hidden;}.menu a span:last-child { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; transform: translateY(-100%);} |
Cada vez que pasemos el cursor sobre un enlace, su texto desaparecerá. Por otro lado, en ese momento el icono asociado se hará visible:
01 02 03 04 05 06 07 08 09 10 11 | .menu a span { transition: transform 0.2s ease-out;}.menu a:hover span:first-child { transform: translateY(100%);}.menu a:hover span:last-child { transform: none;} |
Afortunadamente, existe la opción de modificar la dirección de las animaciones deslizantes según nuestras necesidades. Por defecto, durante la animación del desplazamiento, el icono aparecerá de arriba a abajo, mientras que el texto se moverá hacia la parte inferior. Para cambiar ese comportamiento, tenemos que pasar el atributo data-animation a la lista de destino. Los posibles valores son to-top, to-right,y to-left.
Los estilos correspondientes se muestran a continuación:
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .menu[data-animation="to-top"] a span:last-child { transform: translateY(100%);}.menu[data-animation="to-top"] a:hover span:first-child { transform: translateY(-100%);}.menu[data-animation="to-right"] a span:last-child { transform: translateX(-100%);}.menu[data-animation="to-right"] a:hover span:first-child { transform: translateX(100%);}.menu[data-animation="to-left"] a span:last-child { transform: translateX(100%);}.menu[data-animation="to-left"] a:hover span:first-child { transform: translateX(-100%);} |
