Cómo crear un menú navegable en HTML y CSS

Un menú de navegación claro y funcional es esencial en cualquier página web. En este tutorial, aprenderás a crear un menú básico utilizando HTML y CSS, ideal para principiantes que quieran mejorar sus habilidades en diseño web.

Paso 1: Estructura con HTML

Crea un archivo index.html e incluye la siguiente estructura:

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

Este código define una lista no ordenada con enlaces para cada sección.

Paso 2: Estilo con CSS

Crea un archivo styles.css y aplica los siguientes estilos:

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  background-color: #333;
}

nav ul li {
  margin: 0;
}

nav ul li a {
  display: block;
  padding: 10px 20px;
  color: white;
  text-decoration: none;
}

nav ul li a:hover {
  background-color: #6257e3;
}

Esto crea un menú horizontal con un diseño limpio y un efecto hover atractivo.

Paso 3: Vincula los archivos

Asegúrate de enlazar el CSS en el archivo HTML:

<link rel="stylesheet" href="styles.css">

¡Y eso es todo! Con solo unas pocas líneas de código, has creado un menú de navegación funcional y estilizado. Puedes personalizar los colores, tamaños y fuentes según el diseño de tu página.

¿Te ha sido útil este tutorial? Sigue explorando la categoría de Tutoriales para aprender más sobre diseño y desarrollo web. ¡Manos a la obra!