Menu desplegable para Blogger moderno

Aprende a insertar un Menú responsive en Blogger con un Solo Widget

¿Quieres que tu blog de Blogger destaque con un menú profesional, fijo en la parte superior, que sea responsive y fácil de implementar? ¡Estás en el lugar correcto! En este artículo, te guiaré paso a paso para agregar un menú moderno a tu blog de Blogger usando un solo widget HTML/Javascript, sin necesidad de JavaScript. Este menú incluye un diseño elegante, submenús desplegables, un icono de hamburguesa para móviles y es completamente personalizable. Vamos a optimizarlo para SEO con palabras clave como menú para Blogger, menú responsive Blogger y agregar menú a blog, para que atraigas más tráfico orgánico. ¡Manos a la obra!

¿Por Qué Añadir un Menú a Tu Blog de Blogger?

Un menú bien diseñado no solo mejora la navegación de tu blog, sino que también da una impresión profesional y ayuda a los visitantes a encontrar contenido rápidamente. Con el código que compartiremos, tendrás:

• Menú fijo: Siempre visible al desplazarte.
• Diseño responsive: Se adapta a móviles y escritorios.
• Menú hamburguesa: Ideal para pantallas pequeñas.
• Submenús desplegables: Perfectos para organizar categorías.
• Sin JavaScript: Ligero y compatible con Blogger.
• Estilo moderno: Colores sobrios y sombra elegante.

Además, al usar un solo widget, simplificas la edición y mantenimiento. ¡Es ideal para bloggers que quieren un diseño funcional sin complicaciones!

Características del Menú para Blogger

Antes de sumergirnos en la implementación, aquí tienes un resumen de las características clave de este menú:

• Fijo en la parte superior: No desaparece al hacer scroll.
• Responsive: Funciona en móviles, tablets y escritorios.
• Menú hamburguesa en móvil: Un icono que despliega el menú en pantallas pequeñas.
• Submenús desplegables: Muestra subcategorías al pasar el cursor (escritorio) o tocar (móvil).
• Accesibilidad mejorada: Compatible con navegación por teclado gracias a :focus-within.
• Personalizable: Cambia colores, fuentes, enlaces y el título/logo fácilmente.
• Solo HTML y CSS: No requiere scripts adicionales, ideal para Blogger.

Este menú es perfecto para blogs de cualquier temática, desde tecnología hasta lifestyle, y se integra sin problemas en la mayoría de las plantillas de Blogger.

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 en el siguiente blog de demos

Demo Clic aquí

Cómo Implementar el Menú en Blogger

A continuación, te explico cómo agregar el menú a tu blog de Blogger con un solo widget. Sigue estos pasos y tendrás tu menú funcionando en minutos.

Paso 1: Accede al Panel de Blogger

1. Inicia sesión en tu cuenta de Blogger.
2. Dirígete a la pestaña Diseño en el panel de control.

Paso 2: Añade un Gadget HTML/Javascript

1. En la sección Diseño, busca un lugar donde quieras que aparezca el menú. Las opciones más comunes son:
   • Cabecera (Header): Para que el menú esté en la parte superior.
   • Page-body: Asegúrate de que sea el primer gadget si tu plantilla lo permite.
2. Haz clic en Añadir un gadget.
3. Selecciona el gadget HTML/Javascript de la lista.

Paso 3: Configura el Gadget

1. Deja el campo Título en blanco (opcional, ya que el menú es visual).
2. Copia y pega el siguiente código en el campo Contenido. Este código incluye tanto los estilos CSS como la estructura HTML del menú.

<style>
  /* Estilos base del cuerpo para evitar que el contenido se oculte detrás del menú fijo */
  body {
    font-family: 'Segoe UI', T Oliveira, Geneva, Verdana, sans-serif;
    background-color: #f9fafb;
    padding-top: 70px; /* Ajusta este valor si la altura de tu menú es diferente */
  }

  .modern-fixed-menu {
    background-color: #2c3e50; /* Color de fondo oscuro moderno */
    color: #ecf0f1; /* Color de texto claro */
    padding: 0 20px; /* Espaciado interno */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Sombra sutil */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
  }

  .modern-menu-container {
    display: flex;
    justify-content: space-between; /* Alinea el logo/título a la izquierda y el menú a la derecha */
    align-items: center;
    max-width: 1200px; /* Ancho máximo del contenido del menú */
    margin: 0 auto; /* Centra el contenido del menú */
    height: 60px; /* Altura del menú */
  }

  .menu-logo-title a {
    text-decoration: none;
    color: #ecf0f1;
    font-size: 1.5em; /* Tamaño del "logo" o título */
    font-weight: bold;
  }

  .menu-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Menú horizontal por defecto */
  }

  .menu-nav ul li {
    position: relative; /* Para posicionar los submenús */
  }

  .menu-nav ul li a {
    display: block;
    padding: 20px 15px; /* Espaciado de los elementos del menú */
    text-decoration: none;
    color: #ecf0f1;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .menu-nav ul li a:hover,
  .menu-nav ul li a:focus {
    background-color: #34495e; /* Color de fondo al pasar el cursor */
    color: #ffffff;
  }

  /* Estilos para submenús */
  .menu-nav ul li .submenu {
    display: none;
    position: absolute;
    top: 100%; /* Se muestra debajo del elemento padre */
    left: 0;
    background-color: #34495e; /* Color de fondo para submenú */
    min-width: 200px; /* Ancho mínimo del submenú */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    border-radius: 0 0 4px 4px; /* Bordes redondeados inferiores */
    z-index: 1001; /* Asegura que el submenú esté sobre otros elementos */
  }

  .menu-nav ul li:hover > .submenu,
  .menu-nav ul li:focus-within > .submenu {
    display: block;
  }

  .menu-nav ul li .submenu li {
    width: 100%; /* Cada elemento del submenú ocupa el ancho completo */
  }

  .menu-nav ul li .submenu li a {
    padding: 12px 15px;
    color: #ecf0f1;
    border-top: 1px solid #4a6278; /* Separador sutil */
  }

  .menu-nav ul li .submenu li a:hover,
  .menu-nav ul li .submenu li a:focus {
    background-color: #4a6278;
    color: #ffffff;
  }

  /* Checkbox para el menú hamburguesa (oculto) */
  #menu-toggle {
    display: none;
  }

  .menu-toggle-label {
    display: none; /* Oculta en escritorio */
    cursor: pointer;
    padding: 15px;
  }

  .menu-toggle-label span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #ecf0f1;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  /* Estilos para pantallas pequeñas (responsive) */
  @media (max-width: 768px) {
    .menu-logo-title {
      margin-left: 15px; /* Espacio para que no se pegue al borde */
    }
    .menu-nav {
      position: absolute;
      top: 60px; /* Altura del menú */
      left: 0;
      width: 100%;
      background-color: #2c3e50; /* Mismo fondo que la barra */
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      overflow: hidden; /* Para la animación de altura */
      max-height: 0; /* Oculta por defecto */
      transition: max-height 0.4s ease-in-out;
    }

    .menu-nav ul {
      flex-direction: column; /* Menú vertical */
      width: 100%;
      padding: 0;
    }

    .menu-nav ul li {
      width: 100%;
    }

    .menu-nav ul li a {
      padding: 15px;
      border-bottom: 1px solid #34495e; /* Separador entre elementos */
      text-align: center;
    }
    .menu-nav ul li:last-child a {
      border-bottom: none;
    }

    .menu-toggle-label {
      display: flex; /* Mostrar el botón de hamburguesa */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 15px; /* Espacio para que no se pegue al borde */
    }

    #menu-toggle:checked ~ .menu-nav {
      max-height: 500px; /* Altura máxima al desplegar */
    }

    /* Animación del icono de hamburguesa a "X" */
    #menu-toggle:checked ~ .menu-toggle-label span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }
    #menu-toggle:checked ~ .menu-toggle-label span:nth-child(2) {
      opacity: 0;
    }
    #menu-toggle:checked ~ .menu-toggle-label span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    /* Submenús en móvil */
    .menu-nav ul li .submenu {
      position: static; /* No absoluto en móvil */
      display: block; /* Siempre visibles cuando el menú padre está activo */
      background-color: #34495e; /* Ligeramente diferente para distinguir */
      box-shadow: none;
      border-radius: 0;
      padding-left: 20px; /* Indentación para submenú */
      max-height: 0;
      transition: max-height 0.3s ease-out;
      overflow: hidden;
    }

    .menu-nav ul li:hover > .submenu,
    .menu-nav ul li:focus-within > .submenu {
      max-height: 400px; /* Ajustar según el número de sub-ítems */
    }

    .menu-nav ul li .submenu li a {
      padding: 10px 15px;
      font-size: 0.9em;
      border-top: 1px solid #4a6278;
    }
    .menu-nav ul li .submenu li:first-child a {
      border-top: none; /* Quitar borde superior del primer sub-item */
    }
  }
</style>

<nav class="modern-fixed-menu">
  <div class="modern-menu-container">
    <div class="menu-logo-title">
      <a href="/">Mi Blog</a>
    </div>

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

    <div class="menu-nav">
      <ul>
        <li><a href="#">Inicio</a></li>
        <li>
          <a href="#">Categorías ▾</a>
          <ul class="submenu">
            <li><a href="#">Tecnología</a></li>
            <li><a href="#">Tutoriales</a></li>
            <li><a href="#">Noticias</a></li>
            <li><a href="#">Otro Más Largo</a></li>
          </ul>
        </li>
        <li>
          <a href="#">Servicios ▾</a>
          <ul class="submenu">
            <li><a href="#">Diseño Web</a></li>
            <li><a href="#">Consultoría SEO</a></li>
            <li><a href="#">Mantenimiento</a></li>
          </ul>
        </li>
        <li><a href="#">Acerca de</a></li>
        <li><a href="#">Contacto</a></li>
      </ul>
    </div>
  </div>
</nav>

3. Haz clic en Guardar.

Paso 4: Ajusta la Posición del Gadget

1. En la página de Diseño, arrastra el gadget HTML/Javascript a la posición más alta posible (por ejemplo, justo debajo de la cabecera o como primer elemento en la sección principal).
2. Haz clic en Guardar los cambios en la página de Diseño.

Paso 5: Prueba el Menú

• Visita tu blog y comprueba que el menú aparece fijo en la parte superior.
• Prueba los submenús haciendo clic o pasando el cursor.
• Abre el blog en un dispositivo móvil o usa las herramientas de desarrollador de tu navegador para verificar que el menú hamburguesa funciona correctamente.

Personaliza Tu Menú

El menú es completamente personalizable para que se adapte al estilo de tu blog. Aquí tienes algunas ideas:

Cambia los Enlaces y Nombres

• Edita los enlaces (href="#") en el código HTML para que apunten a las páginas o categorías de tu blog. Por ejemplo, cambia <a href="#">Inicio</a> por <a href="/p/inicio.html">Inicio</a>.
• Modifica los nombres de los elementos del menú (por ejemplo, cambia “Categorías” por “Recetas” si tu blog es de cocina).

Ajusta los Colores

• Busca background-color y color en la sección <style> para cambiar el fondo y el texto del menú. Por ejemplo:
  • Cambia #2c3e50 (fondo oscuro) por #007bff para un azul vibrante.
  • Ajusta #ecf0f1 (texto claro) por #ffffff para blanco puro.

Modifica la Fuente

• En el CSS, cambia font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; por otra fuente, como 'Roboto', sans-serif; (asegúrate de que sea una fuente disponible en Blogger o importada desde Google Fonts).

Cambia el Título o Logo

• Reemplaza <a href="/">Mi Blog</a> por el nombre de tu blog o incluso por una imagen de logo: <a href="/"><img src="URL_DE_TU_LOGO" alt="Mi Blog"></a>.

Ajusta la Altura del Menú

• Si cambias la altura del menú (height: 60px; en .modern-menu-container), asegúrate de actualizar:
  • top: 60px; en .menu-nav para móviles.
  • padding-top: 70px; en body para evitar que el contenido quede oculto bajo el menú fijo.

Consideraciones Adicionales para un Menú Perfecto

Compatibilidad con Plantillas de Blogger

La mayoría de las plantillas modernas de Blogger (como Contempo, Soho o Emporio) funcionan bien con este código. Sin embargo, si tu plantilla tiene CSS muy personalizado, podrías necesitar ajustes menores. Por ejemplo, revisa si hay conflictos con z-index o márgenes.

Pruebas en Diferentes Dispositivos

Después de implementar el menú, pruébalo en varios navegadores (Chrome, Firefox, Safari) y dispositivos (móviles, tablets). Usa las herramientas de desarrollador de tu navegador (F12 > vista móvil) para simular pantallas pequeñas.

Accesibilidad

El menú usa :focus-within para mejorar la accesibilidad con teclado, permitiendo que los submenús se abran al navegar con la tecla Tab. Si quieres ir más allá, considera añadir atributos ARIA, aunque para un widget simple de Blogger, este enfoque es suficiente.

Submenús en Móvil

En móviles, los submenús se expanden al tocar el elemento padre, lo que es intuitivo y no requiere JavaScript. Asegúrate de que los nombres de los submenús sean cortos para una mejor experiencia en pantallas pequeñas.

Consejos SEO para Tu Menú en Blogger

Para que este menú no solo sea funcional, sino que también ayude a mejorar el SEO de tu blog, considera lo siguiente:

• Enlaces relevantes: Asegúrate de que los enlaces del menú apunten a páginas importantes de tu blog (como categorías o páginas de contacto). Esto mejora la estructura de navegación y ayuda a Google a indexar tu contenido.
• Palabras clave en los nombres: Usa palabras clave de cola larga en los nombres de los elementos del menú. Por ejemplo, en lugar de “Tutoriales”, usa “Tutoriales de Blogging” si tu nicho es blogging.
• Velocidad de carga: Como este menú usa solo HTML y CSS, es ligero y no afecta la velocidad de carga, un factor clave para el SEO.
• Experiencia de usuario: Un menú claro y responsive mejora el tiempo de permanencia en tu blog, lo que Google valora positivamente.

Conclusión

Agregar un menú moderno y responsive a tu blog de Blogger con un solo widget es más fácil de lo que parece. Con el código proporcionado, tendrás un menú fijo, con submenús desplegables y un diseño adaptable que funciona en cualquier dispositivo. Personalízalo para que refleje la identidad de tu blog y optimízalo con enlaces estratégicos para atraer más tráfico orgánico. ¡Tu blog no solo se verá más profesional, sino que también será más fácil de navegar!

¿Ya probaste este menú en tu blog? ¿Tienes alguna duda o quieres compartir tus personalizaciones? ¡Déjame un comentario abajo! Y si te gustó este tutorial, compártelo con otros bloggers que quieran mejorar su sitio. 🚀

¡Deja tu comentario!

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.