Cómo codificar una barra de navegación desplazable en pocos pasos

La navegación es uno de los elementos más importantes en el diseño web. Sin embargo, a menudo se subestima la importancia de su función en el aspecto visual y en la facilidad de uso. En este artículo, te explicaremos cómo codificar una barra de navegación desplazable para mejorar la experiencia de tus usuarios y resaltar la importancia de su diseño y funcionalidad.

¿Qué es una barra de navegación desplazable?

Una barra de navegación desplazable es una opción de navegación que permite una mejor organización de los enlaces y una mayor facilidad para acceder a ellos, incluso cuando hay una gran cantidad de ellos. En lugar de recurrir a la opción de ocultar la navegación detrás de un menú de hamburguesa en la versión móvil, la barra de navegación desplazable permite que la navegación esté siempre presente y accesible con un desplazamiento fácil.

Paso 1: Estructura del HTML

Para empezar a codificar una barra de navegación desplazable, es necesario estructurar el HTML. Primero, crea una estructura básica con un encabezado y una sección principal. Dentro de la sección principal, crea un contenedor para la barra de navegación y una lista no ordenada con los enlaces de la barra de navegación.

«`html

Título de mi sitio web

«`

Paso 2: Estilizar la barra de navegación con CSS

Una vez que tengas la estructura básica, es hora de aplicar estilos para que la barra de navegación desplazable se vea y funcione correctamente. Esto implica establecer la posición fija de la barra de navegación y añadir un desplazamiento horizontal.

«`css
.navbar{
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
padding: 1rem;
z-index: 999;
overflow-x: auto;
}

.navbar ul{
display: flex;
flex-wrap: nowrap;
}

.navbar li{
padding: 0 1rem;
}

.navbar a{
color: #fff;
font-size: 1.2rem;
text-decoration: none;
}

«`

Paso 3: Agregar script de JavaScript para permitir desplazamiento horizontal

Puede ser que al momento de aplicar el estilo anterior, la barra de navegación se expanda fuera de la pantalla y no se pueda acceder a todos los enlaces. Para solucionar esto, se necesitará un script de JavaScript que permita desplazamiento horizontal.

«`javascript
const navbar = document.querySelector(‘.navbar’);
let previousPosition = window.pageYOffset;

window.addEventListener(‘scroll’, function(){
const currentPosition = window.pageYOffset;
if(previousPosition > currentPosition){
navbar.style.top = ‘0’;
} else{
navbar.style.top = ‘-100px’;
}
previousPosition = currentPosition;
});

«`

Paso 4: Agregar HTML y CSS para un botón que despliegue la barra de navegación

Sí aún requieres mayor optimización en el diseño, puedes agregar un botón desplegable que muestre o esconda la barra de navegación. Esto hará que la experiencia de usuario sea más atractiva y aprovechará al máximo el espacio disponible. Para empezar, agrega un botón en el HTML y estiliza su apariencia con CSS.

«`html

Título de mi sitio web


«`

«`css
.navbar-toggle{
display: none;
position: absolute;
top: 1.5rem;
right: 1rem;
height: 20px;
width: 20px;
background-color: transparent;
border: none;
cursor: pointer;
}

.navbar-toggle span{
display: block;
height: 2px;
width: 20px;
background-color: #333;
margin: 4px 0;
}

@media screen and (max-width: 768px){
.navbar-toggle{
display: block;
}

.navbar{
position: fixed;
top: var(–header-height);
left: 0;
width: 100%;
background-color: #333;
padding: 1rem;
z-index: 999;
overflow-x: hidden;
max-height: 0;
transition: max-height 0.3s ease-in-out;
}

.navbar ul{
display: block;
max-height: 50vh;
overflow-y: auto;
}

.navbar-active .navbar{
max-height: 100vh;
}
}

«`

Paso 5: Agregar JavaScript para que el botón despliegue la barra de navegación

Finalmente, agrega el JavaScript que permita que el botón de despliegue funcione correctamente.

«`javascript
const navbarToggle = document.querySelector(‘.navbar-toggle’);
const navbar = document.querySelector(‘.navbar’);

navbarToggle.addEventListener(‘click’, function(){
navbar.classList.toggle(‘navbar-active’);
});

«`

Para finalizar

En conclusión, añadir una barra de navegación desplazable mejora en gran medida la experiencia de usuario. Al tomar en cuenta estos pasos, se puede diseñar una navegación elegante y eficiente que destaque la marca y fomente la exploración del sitio web.

  • Paso 1: Estructura del HTML
  • Paso 2: Estilizar la barra de navegación con CSS
  • Paso 3: Agregar script de JavaScript para permitir desplazamiento horizontal
  • Paso 4: Agregar HTML y CSS para un botón que despliegue la barra de navegación
  • Paso 5: Agregar JavaScript para que el botón despliegue la barra de navegación

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *