Menú Desplegable Responsive con Solo CSS | Kolectiva - Agencia de marketing

Cómo agregar un menú desplegable responsive sin JavaScript

Un menú desplegable responsive sin JavaScript es una excelente alternativa para quienes desean mantener su blog ligero y rápido. Especialmente en plataformas como Blogger, donde la simplicidad puede marcar la diferencia, usar solo CSS para crear un menú funcional y adaptable es una solución elegante y eficiente.

¿Por qué evitar JavaScript?

Aunque JavaScript permite mucha interactividad, no siempre es necesario. Para funciones básicas como un menú desplegable, puedes usar solo CSS y obtener un resultado limpio, seguro y compatible con todos los navegadores modernos. Además, reducir el uso de scripts mejora la velocidad de carga y la experiencia del usuario.

Cómo funciona un menú desplegable solo con CSS

La técnica se basa en aprovechar el pseudoestado :hover o en algunos casos el uso de checkbox hack, una estrategia que utiliza inputs ocultos y etiquetas para mostrar u ocultar elementos.

Opción 1: Menú desplegable horizontal con :hover

Este tipo de menú es ideal para escritorio. Los submenús aparecen al pasar el cursor por encima del elemento principal.

Código CSS y HTML básico

A continuación te mostramos un ejemplo funcional. Puedes adaptarlo a tu plantilla en Blogger desde el área de “Diseño > Añadir gadget > HTML/JavaScript” o insertarlo directamente en tu plantilla.

<!-- HTML -->
<nav class="menu">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li>
      <a href="#">Categorías</a>
      <ul>
        <li><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
      </ul>
    </li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

/* CSS */
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333;
  display: flex;
}

.menu ul li {
  position: relative;
}

.menu ul li a {
  display: block;
  padding: 10px 15px;
  color: white;
  text-decoration: none;
}

.menu ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background: #444;
  min-width: 150px;
}

.menu ul li:hover ul {
  display: block;
}

.menu ul li ul li a {
  padding: 10px;
}

Opción 2: Menú responsive para móviles con checkbox hack

Para hacer que el menú funcione en dispositivos móviles, puedes usar una casilla de verificación que controle la visibilidad del menú mediante CSS. Este método no requiere ningún JavaScript.

HTML con checkbox hack

<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon">☰</label>

<nav class="mobile-menu">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">Acerca</a></li>
    <li><a href="#">Servicios</a></li>
    <li><a href="#">Contacto</a></li>
  </ul>
</nav>

CSS para hacerlo responsive

.menu-icon {
  display: none;
  font-size: 24px;
  cursor: pointer;
  background: #333;
  color: white;
  padding: 10px;
}

#menu-toggle {
  display: none;
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333;
  display: none;
}

.mobile-menu ul li a {
  display: block;
  padding: 10px;
  color: white;
  text-decoration: none;
}

#menu-toggle:checked + .menu-icon + .mobile-menu ul {
  display: block;
}

/* Mostrar ícono solo en pantallas pequeñas */
@media (max-width: 768px) {
  .menu-icon {
    display: block;
  }

  .mobile-menu ul {
    flex-direction: column;
  }
}

Ventajas de usar solo CSS

Usar solo CSS para crear menús tiene varios beneficios:

• Menor tiempo de carga del sitio
• Mayor compatibilidad con plantillas simples o básicas
• Menor riesgo de errores por scripts mal integrados
• Ideal para SEO, ya que los enlaces son visibles en el HTML

Complementa tu diseño con otras mejoras

Si estás personalizando tu plantilla, no te pierdas nuestra guía sobre modo oscuro solo con CSS, donde explicamos cómo aplicar temas visuales sin afectar el rendimiento. Y si ya has editado tu plantilla antes, te recomendamos leer también los errores más comunes al editar plantillas en Blogger para evitarlos y mantener tu sitio estable.

Conclusión

Crear un menú desplegable responsive sin JavaScript no solo es posible, sino recomendable en muchos casos. Con unas pocas líneas de CSS puedes lograr un diseño elegante, funcional y adaptado a todo tipo de dispositivos. Ideal para quienes usan Blogger y buscan mantener su plantilla limpia y rápida.

¿Ya lo probaste? Cuéntanos si implementaste este tipo de menú o si tienes dudas sobre cómo adaptarlo a tu plantilla actual.