¡El tema de la semana # 3 de mi Desafío de codificación semanal es la navegación ! Así que aprendamos un poco más al respecto.
Navegación
Un componente de navegación es crucial en un sitio web porque desea que sus usuarios puedan navegar fácilmente por sus páginas. Puede encontrar un componente de navegación incluso en sitios web de una sola página que le permitirá saltar a una determinada sección de la página. Entonces, como desarrollador, es muy útil saber cómo construir este tipo de componente.
En este artículo, decidí crear una navegación de barra de pestañas, pero puede crear cualquier tipo de navegación que desee.
Me inspiré en este diseño realizado por Aurelien Salomon. Así es como se verá el resultado final de lo que vamos a construir:
El HTML
La estructura HTML va a ser sencilla. Tendremos una .tab-nav-container
y cuatro .tab
s dentro de ella:
House
Likes
Search
Profile
Como puede ver, cada uno .tab
tiene un ícono (de FontAwesome), el texto correspondiente y algunas clases adicionales que se usarán para dar propiedades background-color
y color
propiedades específicas a cada pestaña . También la .active
clase, que se utilizará para diseñar la pestaña activa. Bastante básico, ¿verdad? ?
El CSS
Primero, diseñemos el .tab-nav-container
:
Nota : tenemos un fixed
ancho en el contenedor ya que no queremos que cambie su tamaño cuando cambiamos el activo, .tab
ya que cada pestaña puede tener un texto que sea más largo o más corto (por ejemplo, Inicio (4 letras) vs Perfil (6 letras)).
Estamos usando flexbox
para distribuir los .tab
s uniformemente dentro del recipiente. Aparte de eso, creo que el CSS se explica por sí mismo.
A continuación ... el .tab
estilo de ':
.tab { background-color: #ffffff; border-radius: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 20px; margin: 0 10px; transition: background 0.4s linear; } .tab i { font-size: 1.2em; } .tab p { font-weight: bold; overflow: hidden; max-width: 0; } .tab.active p { margin-left: 10px; max-width: 200px; transition: max-width 0.4s linear; } .tab.active.purple { background-color: rgba(91, 55, 183, 0.2); color: rgba(91, 55, 183, 1); } .tab.active.pink { background-color: rgba(201, 55, 157, 0.2); color: rgba(201, 55, 157, 1); } .tab.active.yellow { background-color: rgba(230, 169, 25, 0.2); color: rgba(230, 169, 25, 1); } .tab.active.teal { background-color: rgba(28, 150, 162, 0.2); color: rgba(28, 150, 162, 1); }
Algunas cosas a tener en cuenta aquí:
- Para tener una transición suave cuando cambiamos la
.active
pestaña, estamos configurando unatransition: background
propiedad para la.tab
clase. - De forma predeterminada, la
p
etiqueta dentro de.tab
tiene unamax-width
de0
y suoverflow
propiedad establecida enhidden
. Esto se debe a que solo queremos mostrar el texto solo cuando.tab
está activo. - Estamos utilizando las clases de colores personalizados (
.purple
,.pink
, etc.) que tienen diferentes colores en las pestañas.
Asegurémonos de que también se vea bien en dispositivos móviles:
@media (max-width: 450px) { .tab-nav-container { padding: 20px; width: 350px; } .tab { padding: 0 10px; margin: 0; } .tab i { font-size: 1em; } }
Como puede ver, estamos reduciendo .tab-nav-container
cuando el ancho máximo de la ventana gráfica es 450px
y también estamos reduciendo el relleno para que parezca más pequeño.
El JavaScript
Al final, en JS tenemos que asegurarnos de que cuando el usuario hace clic en otro, .tab
la .active
clase se agrega y se elimina del activo anterior .tab
:
// Get all the tabs const tabs = document.querySelectorAll('.tab'); tabs.forEach(clickedTab => { // Add onClick event listener on each tab clickedTab.addEventListener('click', () => { // Remove the active class from all the tabs (this acts as a "hard" reset) tabs.forEach(tab => { tab.classList.remove('active'); }); // Add the active class on the clicked tab clickedTab.classList.add('active'); }); });
Conclusión
Este tipo de navegación de la barra de pestañas se usa principalmente en dispositivos móviles, por lo que si desea reutilizarlo para una aplicación móvil, asegúrese de colocar el contenedor en la parte inferior de la pantalla (con position: fixed
) y recalcula el ancho para completar todo el ancho de la pantalla.
En el ejemplo de Codepen, también cambiamos el color de fondo del cuerpo cuando se hace clic en otra pestaña. Esto es solo para fines visuales y no está exactamente relacionado con el tema de codificación de esta semana. Pero si quieres ver cómo hice eso, mira el código JS en el bolígrafo (solo 2 líneas adicionales de código).
Más ejemplos de este desafío de codificación
En un artículo anterior, demostré cómo crear un menú de navegación receptivo. También puede comprobarlo si desea construir algo así.
Además, si no lo ha hecho, asegúrese de leer las “reglas” del Desafío de codificación semanal si desea participar en el Desafío. ¿Y por qué no lo harías tú? ¡Es una excelente manera de mejorar sus habilidades de codificación! ?
¡Feliz codificación! ?
Publicado originalmente en www.florin-pop.com.