Cómo construir un componente de navegación de barra de pestañas simple

¡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-containery cuatro .tabs dentro de ella:

House
Likes
Search
Profile

Como puede ver, cada uno .tabtiene un ícono (de FontAwesome), el texto correspondiente y algunas clases adicionales que se usarán para dar propiedades background-colory colorpropiedades específicas a cada pestaña . También la .activeclase, 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 fixedancho en el contenedor ya que no queremos que cambie su tamaño cuando cambiamos el activo, .tabya 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 flexboxpara distribuir los .tabs uniformemente dentro del recipiente. Aparte de eso, creo que el CSS se explica por sí mismo.

A continuación ... el .tabestilo 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í:

1. Para tener una transición suave cuando cambiamos la .activepestaña, estamos configurando una transition: backgroundpropiedad para la .tabclase.
2. De forma predeterminada, la petiqueta dentro de .tabtiene una max-widthde 0y su overflowpropiedad establecida en hidden. Esto se debe a que solo queremos mostrar el texto solo cuando .tabestá activo.
3. 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-containercuando el ancho máximo de la ventana gráfica es 450pxy 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, .tabla .activeclase 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.