Menú desplegable para Blogger V3

Cómo Agregar un Menú Desplegable Responsive en Blogger

¿Quieres mejorar la navegación de tu blog con un menú moderno y adaptable a móviles? En este tutorial completo, te mostraré paso a paso cómo implementar un menú desplegable responsive en Blogger usando HTML, CSS y JavaScript. Este menú incluye efectos hover, submenús animados y un diseño completamente optimizado para todos los dispositivos.

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í

📌 Pasos para Implementar el Menú en Blogger

1. Accede al Panel de Blogger

• Inicia sesión en tu cuenta de Blogger
• Ve a "Diseño" o "Tema" (dependiendo de la versión)
• Haz clic en "Añadir un gadget" y selecciona "HTML/JavaScript"

2. Copia y Pega el Código Completo

Dentro del gadget, pega el siguiente código:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        /* Estilos base del cuerpo */
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding-top: 70px;
        }

        /* Estilos generales del menú fijo */
        .menu-fixed {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            width: 100%;
            background-color: #f8f8f8;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }

        .menu {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
        }

        .menu-item {
            position: relative;
        }

        .menu-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 20px;
            text-decoration: none;
            color: #333;
            transition: background-color 0.3s ease;
        }

        /* Colores por pestaña */
        .menu-item:nth-child(1) .menu-link { background-color: #a8dadc; color: #1d3557; }
        .menu-item:nth-child(2) .menu-link { background-color: #457b9d; color: #f1faee; }
        .menu-item:nth-child(3) .menu-link { background-color: #1d3557; color: #f1faee; }
        .menu-item:nth-child(4) .menu-link { background-color: #e63946; color: #f1faee; }

        /* Efecto hover */
        .menu-item:nth-child(1) .menu-link:hover { background-color: #86a8b7; }
        .menu-item:nth-child(2) .menu-link:hover { background-color: #355c7d; }
        .menu-item:nth-child(3) .menu-link:hover { background-color: #152540; }
        .menu-item:nth-child(4) .menu-link:hover { background-color: #b82e3a; }

        /* Bordes inferiores animados */


        .menu-item:not(.has-submenu) .menu-link:hover::after {
            width: 100%;
        }

        /* Submenús */
        .submenu {
            position: absolute;
            top: 100%;
            left: 0;
            background-color: #fff;
            list-style: none;
            padding: 0;
            margin: 0;
            border: 1px solid #ccc;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            min-width: 200px;
        }

        .menu-item:hover > .submenu {
            opacity: 1;
            visibility: visible;
        }

        .submenu-item a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #333;
            transition: background-color 0.3s ease;
        }

        .submenu-item a:hover {
            background-color: #eee;
        }

        /* Icono en menú de escritorio */
        .menu-link i {
            font-size: 0.8em;
            margin-left: 10px;
        }

        /* Estilos para móvil */
        .menu-toggle {
            display: none;
            background: none;
            border: none;
            color: #333;
            font-size: 1.5em;
            padding: 10px 15px;
            cursor: pointer;
        }

        .mobile-menu {
            display: none;
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            background-color: #f8f8f8;
        }

        .mobile-menu-item a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px;
            text-decoration: none;
            color: #333;
            border-bottom: 1px solid #eee;
        }

        .mobile-submenu {
            display: none;
            list-style: none;
            padding-left: 20px;
            margin: 0;
            background-color: #f0f0f0;
        }

        .mobile-submenu-item a {
            display: block;
            padding: 10px 15px;
            text-decoration: none;
            color: #555;
            border-bottom: 1px solid #ddd;
        }

        .mobile-menu-item a i {
            font-size: 0.8em;
            margin-left: 5px;
            transition: transform 0.3s ease;
        }

        .mobile-menu-item.active a i {
            transform: rotate(180deg);
        }

        /* Media query para móviles */
        @media (max-width: 768px) {
            .menu-fixed {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;
            }

            .menu {
                display: none;
            }

            .menu-toggle {
                display: block;
            }

            .mobile-menu.active {
                display: block;
              position: fixed;
        top: 46px;
        left: 0;
        right: 0;
        z-index: 1000;
        width: 100%;
    }
            }

            .menu-link i {
                display: none;
            }

            .menu-link::after {
                display: none;
            }
        }
    </style>

    <nav class="menu-fixed">
        <button class="menu-toggle" aria-expanded="false" aria-controls="mobile-menu">
            <i class="fas fa-bars"></i>
        </button>
        <ul class="menu">
            <li class="menu-item">
                <a href="#" class="menu-link">Inicio</a>
            </li>
            <li class="menu-item has-submenu">
                <a href="#" class="menu-link">Servicios <i class="fas fa-chevron-right"></i></a>
                <ul class="submenu">
                    <li class="submenu-item"><a href="#">Diseño Web</a></li>
                    <li class="submenu-item"><a href="#">Desarrollo Web</a></li>
                    <li class="submenu-item"><a href="#">Marketing Digital</a></li>
                </ul>
            </li>
            <li class="menu-item has-submenu">
                <a href="#" class="menu-link">Acerca de <i class="fas fa-chevron-right"></i></a>
                <ul class="submenu">
                    <li class="submenu-item"><a href="#">Nuestra Historia</a></li>
                    <li class="submenu-item"><a href="#">Nuestro Equipo</a></li>
                    <li class="submenu-item"><a href="#">Testimonios</a></li>
                </ul>
            </li>
            <li class="menu-item">
                <a href="#" class="menu-link">Contacto</a>
            </li>
        </ul>
    </nav>

    <ul class="mobile-menu" id="mobile-menu">
        <li class="mobile-menu-item">
            <a href="#">Inicio</a>
        </li>
        <li class="mobile-menu-item has-submenu-mobile">
            <a href="#">Servicios <i class="fas fa-chevron-down"></i></a>
            <ul class="mobile-submenu">
                <li class="mobile-submenu-item"><a href="#">Diseño Web</a></li>
                <li class="mobile-submenu-item"><a href="#">Desarrollo Web</a></li>
                <li class="mobile-submenu-item"><a href="#">Marketing Digital</a></li>
            </ul>
        </li>
        <li class="mobile-menu-item has-submenu-mobile">
            <a href="#">Acerca de <i class="fas fa-chevron-down"></i></a>
            <ul class="mobile-submenu">
                <li class="mobile-submenu-item"><a href="#">Nuestra Historia</a></li>
                <li class="mobile-submenu-item"><a href="#">Nuestro Equipo</a></li>
                <li class="mobile-submenu-item"><a href="#">Testimonios</a></li>
            </ul>
        </li>
        <li class="mobile-menu-item">
            <a href="#">Contacto</a>
        </li>
    </ul>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const menuToggle = document.querySelector('.menu-toggle');
            const mobileMenu = document.getElementById('mobile-menu');
            const mobileSubmenuLinks = document.querySelectorAll('.mobile-menu-item.has-submenu-mobile > a');

            // Toggle mobile menu
            menuToggle.addEventListener('click', function() {
                const expanded = this.getAttribute('aria-expanded') === 'true';
                this.setAttribute('aria-expanded', !expanded);
                mobileMenu.classList.toggle('active');
            });

            // Toggle mobile submenus
            mobileSubmenuLinks.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const submenu = this.nextElementSibling;
                    const parent = this.parentElement;
                    const isActive = submenu.style.display === 'block';

                    // Close all other submenus
                    document.querySelectorAll('.mobile-submenu').forEach(sub => {
                        sub.style.display = 'none';
                    });
                    document.querySelectorAll('.mobile-menu-item').forEach(item => {
                        item.classList.remove('active');
                    });

                    // Toggle current submenu
                    submenu.style.display = isActive ? 'none' : 'block';
                    parent.classList.toggle('active', !isActive);
                });
            });
        });
    </script>

3. Personaliza el Menú

Adapta el menú a tus necesidades:

1. Cambia los enlaces (#): Reemplázalos con las URLs de tu blog
2. Modifica los colores: Edita los códigos HEX en las clases CSS
3. Añade más opciones: Copia y pega la estructura de <li class="menu-item"> para más elementos

4. Guarda y Previsualiza

Haz clic en "Guardar" y revisa tu blog en diferentes dispositivos para asegurarte de que el menú funcione correctamente.

---

🔍 Características Principales del Menú

• Diseño completamente responsive que se adapta perfectamente a móviles, tablets y escritorio
• Submenús desplegables con animaciones fluidas y suaves
• Efectos hover para una mejor experiencia de usuario
• Iconos modernos de Font Awesome integrados
• Barra fija que permanece visible al hacer scroll
• Menú acordeón en dispositivos móviles

📱 Funcionamiento en Dispositivos Móviles

En pantallas pequeñas (menores a 768px), el menú se transforma automáticamente:

• Muestra un práctico botón de hamburguesa (☰)
• Al hacer clic, se despliegan las opciones principales
• Los submenús se expanden con un suave efecto al tocar las flechas (▼)
• Diseño optimizado para táctil con áreas de toque generosas

Consejo profesional: Prueba siempre tu menú en varios dispositivos reales para asegurar la mejor experiencia de usuario.

🎨 Personalización Avanzada

Si deseas modificar más aspectos del diseño:

Cambiar Fuentes

.menu-link {
    font-family: 'Roboto', sans-serif;
    /* Añade esto en el CSS */
}

Modificar Velocidad de Animaciones

/* Tiempo de transición más rápido */
.submenu {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

Añadir Efectos Adicionales

/* Efecto de sombra al hacer hover */
.menu-link:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

---

📢 Conclusión

Con este tutorial completo, ahora tienes todas las herramientas necesarias para implementar un menú profesional y responsive en tu blog de Blogger. Este diseño mejorará significativamente la experiencia de navegación de tus visitantes y le dará un aspecto moderno y pulido a tu sitio.

Recuerda que:

• Puedes ajustar los colores para que coincidan con tu marca
• El menú es completamente personalizable
• Funciona perfectamente en todos los dispositivos
• No requiere plugins adicionales

¿Tienes dudas o sugerencias? ¡Déjalas en los comentarios! Estaré encantado de ayudarte.

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.