¿Cómo hacer un Menú vertical desplegable para mi blog de Blogger

Cómo Crear un Menú Vertical Desplegable para tu Blog en Blogger | Tutorial Completo

¿Quieres que tu blog en Blogger destaque con una navegación moderna y funcional? Un menú vertical desplegable es la solución perfecta para organizar tus categorías, páginas y secciones, ofreciendo a tus visitantes una experiencia fluida y profesional. En este tutorial, te guiaré paso a paso para implementar un menú vertical elegante, responsive y personalizable en tu blog de Blogger, ¡sin necesidad de ser un experto en código! Vamos a crear algo increíble juntos.

¿Por qué añadir un menú vertical desplegable a tu blog?

Un menú vertical con submenús desplegables es ideal para blogs con mucho contenido, como los dedicados a tecnología, viajes, cocina o lifestyle. Este tipo de menú organiza la información de manera clara, mejora la navegación y le da un toque moderno a tu sitio. Además, es completamente responsive, lo que significa que se verá genial en cualquier dispositivo, desde computadoras hasta smartphones.

En este artículo, aprenderás a:

• Implementar un menú vertical con submenús interactivos.
• Personalizar colores, fuentes e iconos para que combine con el estilo de tu blog.
• Añadir el código a Blogger de forma sencilla y rápida.

Puede utilizar una herramienta llamada Editor HTML ONLINE, donde podrá realizar los cambios en vivo y luego copiar el código he insertarlo en un solo widget de Blogger, o una pagina web.

Editor HTML

A continuación puede ver su demostración

• 🏠 Inicio
• 📁 Categorías ›
  • Tecnología
  • Viajes
  • Cocina
• ✉️ Contacto
• ⚙️ Configuración ›
  • Perfil
  • Privacidad
  • Notificaciones

Materiales que necesitas

Antes de empezar, asegúrate de tener:

• Acceso al panel de Blogger: Necesitas permisos de administrador para editar el diseño.
• Un editor de texto: Para copiar y pegar el código (puede ser el Bloc de Notas o similar).
• Creatividad: ¡El menú es súper personalizable para adaptarlo a tu estilo!

No se requieren conocimientos avanzados de programación, ya que el código que te proporcionaré es fácil de usar y listo para copiar.

Código Completo para el Menú Vertical Desplegable

A continuación, te comparto el código completo (HTML, CSS y JavaScript) para crear un menú vertical desplegable con un diseño moderno, transiciones suaves y compatibilidad con dispositivos móviles. Copia este código y pégalo en tu blog siguiendo las instrucciones más adelante.

<div class="modern-vertical-menu">
  <ul class="menu-vertical">
    <li class="menu-item">
      <a href="#">
        <span class="menu-icon">🏠</span>
        <span class="menu-text">Inicio</span>
      </a>
    </li>
    <li class="menu-item has-submenu">
      <a href="#">
        <span class="menu-icon">📁</span>
        <span class="menu-text">Categorías</span>
        <span class="submenu-toggle">›</span>
      </a>
      <ul class="submenu">
        <li><a href="#">Tecnología</a></li>
        <li><a href="#">Viajes</a></li>
        <li><a href="#">Cocina</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="#">
        <span class="menu-icon">✉️</span>
        <span class="menu-text">Contacto</span>
      </a>
    </li>
    <li class="menu-item has-submenu">
      <a href="#">
        <span class="menu-icon">⚙️</span>
        <span class="menu-text">Configuración</span>
        <span class="submenu-toggle">›</span>
      </a>
      <ul class="submenu">
        <li><a href="#">Perfil</a></li>
        <li><a href="#">Privacidad</a></li>
        <li><a href="#">Notificaciones</a></li>
      </ul>
    </li>
  </ul>
</div>

<style>
/* Contenedor principal */
.modern-vertical-menu {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/* Estilo base del menú */
.menu-vertical {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* Items del menú */
.menu-item {
  position: relative;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item a {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background: #f8f9fa;
}

.menu-item:hover > a {
  color: #4a6cf7;
  transform: translateX(5px);
}

/* Iconos */
.menu-icon {
  margin-right: 12px;
  font-size: 1.1em;
  width: 20px;
  text-align: center;
}

.menu-text {
  flex-grow: 1;
}

/* Submenús */
.submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #f8f9fa;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.has-submenu.active .submenu {
  max-height: 500px; /* Ajusta según necesidad */
}

.submenu li a {
  padding: 12px 20px 12px 50px;
  font-size: 0.9em;
  color: #555;
}

.submenu li a:hover {
  background: #e9ecef;
  color: #4a6cf7;
}

.submenu-toggle {
  transition: transform 0.3s ease;
}

.has-submenu.active .submenu-toggle {
  transform: rotate(90deg);
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-vertical-menu {
    max-width: 100%;
  }
  
  .menu-item a {
    padding: 12px 15px;
  }
  
  .submenu li a {
    padding-left: 40px;
  }
}

/* Efecto moderno al hacer hover */
.menu-item a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: #4a6cf7;
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.menu-item:hover a::before {
  transform: scaleY(1);
}
</style>

<script>
// Agregar funcionalidad a los submenús
document.addEventListener('DOMContentLoaded', function() {
  const submenuToggles = document.querySelectorAll('.has-submenu > a');
  
  submenuToggles.forEach(toggle => {
    toggle.addEventListener('click', function(e) {
      e.preventDefault();
      const parentItem = this.parentElement;
      
      // Cerrar otros submenús abiertos
      document.querySelectorAll('.has-submenu').forEach(item => {
        if (item !== parentItem) {
          item.classList.remove('active');
        }
      });
      
      // Alternar el submenú actual
      parentItem.classList.toggle('active');
    });
  });
});
</script>
        

Cómo Implementar el Menú en Blogger

Añadir este menú vertical desplegable a tu blog en Blogger es súper sencillo. Sigue estos pasos para tenerlo funcionando en pocos minutos:

Paso 1: Accede al panel de Blogger

1. Inicia sesión en tu cuenta de Blogger.
2. Ve a la pestaña Diseño en el menú lateral.

Paso 2: Añade un gadget HTML/JavaScript

1. En la sección de diseño, elige dónde quieres que aparezca el menú (por ejemplo, en la barra lateral).
2. Haz clic en Añadir un gadget.
3. Selecciona el gadget HTML/JavaScript de la lista.

Paso 3: Pega el código

1. Copia el código completo proporcionado arriba (HTML, CSS y JavaScript).
2. Pégalo en el campo de contenido del gadget HTML/JavaScript.
3. Asegúrate de que todo el código esté incluido sin modificaciones accidentales.

Paso 4: Guarda y verifica

1. Haz clic en Guardar para cerrar el gadget.
2. Guarda los cambios en el diseño con el botón Guardar disposición.
3. Visita tu blog y comprueba que el menú se vea y funcione correctamente.

Personaliza tu Menú Vertical Desplegable

Este menú es altamente personalizable para que refleje la identidad de tu blog. Aquí tienes algunas ideas para adaptarlo:

Cambia los colores

- Color principal: Reemplaza #4a6cf7 en el CSS por el código hexadecimal de tu color favorito (por ejemplo, #e91e63 para un rosa vibrante).
- Fondo del menú: Modifica background: #ffffff en .menu-vertical para cambiar el color de fondo.

Cambia los iconos

Los emojis (🏠, 📁, etc.) son ligeros, pero puedes usar iconos de FontAwesome. Incluye la librería en tu plantilla y reemplaza los emojis por clases como <i class="fas fa-home"></i>.

Ajusta el espaciado

- Cambia los valores de padding en .menu-item a o .submenu li a para ajustar el espacio entre los elementos.
- Modifica max-width: 300px en .modern-vertical-menu para hacer el menú más ancho o estrecho.

Cambia las fuentes

Busca font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; en el CSS y cámbialo por una fuente como 'Poppins', sans-serif o 'Montserrat', sans-serif.

Ventajas de este Menú Vertical

Este menú no solo es atractivo, sino también funcional:

• Responsive: Se adapta perfectamente a móviles y computadoras.
• Efectos modernos: Incluye transiciones suaves y efectos al pasar el ratón.
• Fácil de usar: Los submenús se abren y cierran con un clic, mejorando la experiencia del usuario.
• Ligero: No requiere librerías externas, lo que mantiene tu blog rápido.

Solución de problemas comunes

Si encuentras algún inconveniente, revisa lo siguiente:

• Los submenús no se abren: Verifica que el código JavaScript esté incluido y que no haya errores en la consola del navegador (presiona F12 para comprobar).
• El menú no se ve bien en móviles: Asegúrate de que el CSS responsive (en @media (max-width: 768px)) esté intacto.
• Los enlaces no funcionan: Sustituye los # en los atributos href del HTML por las URLs reales de las páginas de tu blog.

Conclusión

¡Enhorabuena! Ahora sabes cómo añadir un menú vertical desplegable a tu blog en Blogger. Este menú no solo mejorará la navegación de tus visitantes, sino que también le dará un aspecto profesional y moderno a tu sitio. Personalízalo a tu gusto y empieza a disfrutar de una mejor experiencia para tus lectores.

¿Te quedó alguna duda o quieres mostrar cómo quedó tu menú? Déjame un comentario o contáctame. ¡Hagamos que tu blog brille!

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Menu desplegable

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.