CSS - Barra de navegación

Conceptos básicos de la barra de navegación

Una barra de navegación, o navbar, es un elemento clave en el diseño web que ayuda a los usuarios a moverse por un sitio web. Normalmente contiene una lista de enlaces que llevan a los usuarios a diferentes secciones o páginas del sitio. En esta sección, aprenderás la estructura básica de una barra de navegación usando HTML, cómo darle estilo con CSS y cómo posicionarla en la página.

Para crear una barra de navegación básica usando HTML, utiliza el elemento <nav> para envolver una lista de enlaces. Dentro del elemento <nav>, usa una lista no ordenada (<ul>) para contener los elementos de navegación. Cada elemento de la lista está representado por un elemento de lista (<li>) que contiene un elemento de anclaje (<a>) con un atributo href que apunta a la página o sección deseada.

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

Una vez que tengas la estructura HTML básica, usa CSS para dar estilo a la barra de navegación. Puedes aplicar estilos a los elementos <nav>, <ul>, <li> y <a> para cambiar su apariencia. Por ejemplo, elimina el estilo de lista predeterminado usando list-style: none;, agrega relleno y margen a los elementos de la lista, y estiliza los enlaces con colores y fuentes personalizados.

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
}

Posicionar la barra de navegación en tu página es importante para el diseño web. Usa CSS para controlar su ubicación. Por defecto, se posicionará en el flujo normal del documento. Sin embargo, puedes usar cambios en la propiedad position como position: fixed; para que se mantenga en la parte superior incluso cuando los usuarios se desplacen.

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f5f5f5;
  padding: 10px;
}

Al comprender estos conceptos básicos —estructura, estilo y posicionamiento— puedes crear una navegación funcional para tu sitio web.

Creando una Barra de Navegación Horizontal

Una barra de navegación horizontal es una opción de diseño común para sitios web, ya que proporciona fácil acceso a las secciones o páginas principales en una sola línea. Para crear una barra de navegación horizontal, comienza con una lista no ordenada (<ul>) dentro de un elemento <nav>. Cada elemento de la lista (<li>) representará un elemento de navegación, conteniendo un elemento de anclaje (<a>) con un atributo href que apunte a la página o sección correspondiente.

Para hacer que los elementos de la lista aparezcan horizontalmente, usa la propiedad CSS display: inline-block; en los elementos <li>. Esto hará que se sitúen uno al lado del otro, en lugar de apilarse verticalmente. Agrega algo de relleno a los elementos de la lista para crear espacio entre ellos y usa el margen para controlar la posición general de la barra de navegación.

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  display: block;
  padding: 10px;
}

nav {
  background-color: #f5f5f5;
}

nav a {
  color: #333;
}

nav a:hover {
  background-color: #333;
}

Creación de una barra de navegación vertical

Una barra de navegación vertical apila los elementos de navegación verticalmente. Este diseño es útil cuando tienes un espacio horizontal limitado o deseas crear una navegación lateral. Para crear una barra de navegación vertical, comienza con una lista no ordenada (<ul>) dentro de un elemento <nav>. En lugar de mostrar los elementos de la lista como elementos en línea, estílalos como elementos de bloque.

<nav>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: block;
  margin-bottom: 10px;
}

nav a {
  display: block;
  padding: 10px;
}

nav {
  background-color: #f5f5f5;
  width: 200px;
}

nav a {
  color: #333;
  text-decoration: none;
}

nav a:hover {
  background-color: #333;
  color: #fff;
}

Barras de navegación responsive

Es importante crear barras de navegación responsive que se adapten a diferentes anchos de viewport. Las barras de navegación responsive proporcionan una buena experiencia de usuario al ajustar su diseño y funcionalidad según el espacio de pantalla disponible. En esta sección, usaremos media queries para crear barras de navegación responsive, ocultar y mostrar la barra de navegación según el tamaño de la pantalla, y crear un botón de alternancia para dispositivos móviles.

Las media queries son una característica de CSS que permite aplicar diferentes estilos según las características del dispositivo, como el ancho de la pantalla. Para crear una barra de navegación responsive, puedes usar media queries para cambiar su diseño y estilo en diferentes puntos de quiebre. Puedes tener una barra de navegación horizontal en pantallas más grandes y cambiar a una barra de navegación vertical u oculta en pantallas más pequeñas.

/* Estilos para pantallas más grandes */
nav {
  display: flex;
  justify-content: space-between;
  background-color: #f5f5f5;
  padding: 10px;
}

/* Estilos para pantallas más pequeñas */
@media (max-width: 600px) {
  nav {
    flex-direction: column;
  }

  nav ul {
    display: none;
  }
}

En el ejemplo anterior, la barra de navegación se muestra como un contenedor flex con espacio entre los elementos en pantallas más grandes. Cuando el ancho de la pantalla es de 600 píxeles o menos, la barra de navegación cambia a un diseño vertical usando flex-direction: column;, y los elementos de navegación se ocultan usando display: none;.

Para proporcionar acceso a la barra de navegación oculta en pantallas más pequeñas, puedes crear un botón de alternancia. El botón de alternancia permite a los usuarios mostrar u ocultar la barra de navegación al hacer clic en él. Puedes crear este botón usando HTML y CSS y usar JavaScript para la funcionalidad de alternancia.

<nav>
  <div class="hamburger">
    <span></span>
    <span></span>
    <span></span>
  </div>
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca de</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

.hamburger {
  display: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin-bottom: 5px;
}

@media (max-width: 600px) {
  .hamburger {
    display: block;
  }
}

const hamburger = document.querySelector('.hamburger');
const navList = document.querySelector('nav ul');

hamburger.addEventListener('click', () => {
   navList.classList.toggle('show');
});