Crear un menú de navegación horizontal usando CSS

Tiempo de lectura: 2 minutos

Hola, hoy te voy a enseñar cómo crear un menú de navegación horizontal usando CSS:

HTML:

Primero, crea la estructura HTML básica del menú de navegación:

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

CSS:

Ahora vamos a aplicar los estilos CSS para hacer que el menú sea horizontal:

nav ul {
  list-style: none; /* quitamos los puntos que vienen por defecto en la lista */
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block; /* hacemos que los elementos se muestren en línea */
  margin-right: 20px; /* añadimos un margen derecho para separar los elementos */
}

nav a {
  display: block; /* hacemos que los enlaces ocupen todo el espacio disponible */
  padding: 5px 10px; /* añadimos un padding para hacer el enlace más grande */
  color: #333; /* cambiamos el color del texto */
  text-decoration: none; /* quitamos la subrayado que viene por defecto en los enlaces */
}

nav a:hover {
  background-color: #333; /* añadimos un color de fondo cuando pasamos el mouse */
  color: #fff; /* cambiamos el color del texto cuando pasamos el mouse */
}

Con estos estilos, hemos creado un menú de navegación horizontal básico. Si quieres añadir más estilos, como un color de fondo para el menú completo o un efecto de transición para el cambio de color al pasar el mouse, puedes hacerlo según tus preferencias y habilidades en CSS.

Aquí te dejo un ejemplo de cómo añadir un color de fondo al menú y un efecto de transición al pasar el mouse:

nav {
  background-color: #f2f2f2; /* añadimos un color de fondo al menú */
}

nav a {
  transition: background-color 0.2s ease-in-out; /* añadimos un efecto de transición al pasar el mouse */
}

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

Con estos cambios, ahora el menú tendrá un color de fondo gris claro y cuando se pase el mouse sobre un elemento, el fondo del enlace cambiará suavemente a negro.

Recuerda que estas son solo algunas ideas básicas para empezar con un menú de navegación horizontal en CSS, pero puedes personalizarlo según tus necesidades y gustos. ¡Espero que te haya sido útil!