Menú desplegable para Blogger nuevo estilo CSS3

Menú Desplegable Responsive para Blogger: Tutorial Completo

¡Hola, bloggers! ¿Quieres darle un toque profesional a tu blog en Blogger con un menú desplegable responsive que sea moderno, funcional y sin complicaciones? En este tutorial te guiaré paso a paso para implementar un menú de navegación elegante, creado únicamente con CSS (¡sin JavaScript!), que se adapta perfectamente a dispositivos móviles y de escritorio. Con transiciones suaves, un diseño atractivo y colores personalizables, este menú hará que tu blog destaque. 🚀

¿Por qué elegir este menú desplegable para Blogger?

Antes de sumergirnos en el código, hablemos de las características que hacen que este menú responsive sea ideal para tu blog:

• Solo CSS, sin JavaScript: Ligero, rápido y sin necesidad de scripts adicionales.
• Posición fija en la parte superior: Siempre visible, incluso al hacer scroll.
• Responsive al 100%:
  • En escritorio: Submenús que se despliegan al pasar el cursor (hover).
  • En móvil: Menú hamburguesa con submenús en formato acordeón al hacer clic.
• Interacciones mejoradas: Transiciones suaves y efectos visuales para una experiencia de usuario fluida.
• Diseño moderno: Indicadores claros de submenús y colores personalizables con variables CSS.
• Fácil de implementar: Perfecto para principiantes y avanzados en 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í

¿Listo para transformar la navegación de tu blog? ¡Vamos con el tutorial!

---

Pasos para Implementar el Menú Desplegable en Blogger

1. Accede al Panel de Blogger

1. Inicia sesión en tu cuenta de Blogger.
2. Dirígete al apartado Diseño en el menú lateral.
3. Haz clic en Añadir un gadget y selecciona la opción HTML/JavaScript.

2. Copia y Pega el Código

En el gadget HTML/JavaScript, pega el siguiente código completo. Este incluye el HTML para la estructura del menú, el enlace a Font Awesome para los íconos y los estilos CSS que hacen la magia. 🪄

<!-- Carga Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<nav id="modern-nav">
    <!-- Toggle para el menú hamburguesa en móvil -->
    <input type="checkbox" id="menu-toggle" class="menu-toggle-checkbox">
    <label for="menu-toggle" class="menu-toggle-label">
        <span class="hamburger-icon"></span>
    </label>

    <ul class="menu-list" id="ayudadeblogger-menu">
        <li><a href="/">Inicio</a></li>

        <li class="has-submenu">
            <a href="/temas">Temas
                <i class="fas fa-chevron-down menu-indicator desktop-indicator"></i>
            </a>
            <input type="checkbox" id="submenu-toggle-temas" class="submenu-toggle-checkbox">
            <label for="submenu-toggle-temas" class="submenu-toggle-label" aria-label="Desplegar Temas">
                <i class="fas fa-chevron-down menu-indicator mobile-indicator"></i>
            </label>
            <ul class="submenu">
                <li><a href="#">Farandula</a></li>
                <li><a href="#">Deportes</a></li>
                <li><a href="#">Entretenimiento</a></li>
                <li><a href="#">Musica</a></li>
            </ul>
        </li>

        <li class="has-submenu">
            <a href="/farandula">Farandula
                <i class="fas fa-chevron-down menu-indicator desktop-indicator"></i>
            </a>
            <input type="checkbox" id="submenu-toggle-farandula" class="submenu-toggle-checkbox">
            <label for="submenu-toggle-farandula" class="submenu-toggle-label" aria-label="Desplegar Farandula">
                <i class="fas fa-chevron-down menu-indicator mobile-indicator"></i>
            </label>
            <ul class="submenu">
                <li><a href="#">Sub Farandula 1</a></li>
                <li><a href="#">Sub Farandula 2</a></li>
                <li class="has-submenu">
                    <a href="#">Más Niveles
                        <i class="fas fa-chevron-right menu-indicator desktop-indicator"></i>
                    </a>
                    <input type="checkbox" id="submenu-toggle-mas-niveles" class="submenu-toggle-checkbox">
                    <label for="submenu-toggle-mas-niveles" class="submenu-toggle-label" aria-label="Desplegar Más Niveles">
                        <i class="fas fa-chevron-down menu-indicator mobile-indicator"></i>
                    </label>
                    <ul class="submenu">
                        <li><a href="#">Nivel 3.1</a></li>
                        <li><a href="#">Nivel 3.2</a></li>
                    </ul>
                </li>
            </ul>
        </li>

        <li class="has-submenu">
            <a href="/deportes">Deportes
                <i class="fas fa-chevron-down menu-indicator desktop-indicator"></i>
            </a>
            <input type="checkbox" id="submenu-toggle-deportes" class="submenu-toggle-checkbox">
            <label for="submenu-toggle-deportes" class="submenu-toggle-label" aria-label="Desplegar Deportes">
                <i class="fas fa-chevron-down menu-indicator mobile-indicator"></i>
            </label>
            <ul class="submenu">
                <li><a href="#">Sub Deportes 1</a></li>
                <li><a href="#">Sub Deportes 2</a></li>
            </ul>
        </li>

        <li class="has-submenu">
            <a href="/entretenimiento">Entretenimiento
                <i class="fas fa-chevron-down menu-indicator desktop-indicator"></i>
            </a>
            <input type="checkbox" id="submenu-toggle-entretenimiento" class="submenu-toggle-checkbox">
            <label for="submenu-toggle-entretenimiento" class="submenu-toggle-label" aria-label="Desplegar Entretenimiento">
                <i class="fas fa-chevron-down menu-indicator mobile-indicator"></i>
            </label>
            <ul class="submenu">
                <li><a href="#">Sub Entretenimiento 1</a></li>
            </ul>
        </li>

        <li class="has-submenu">
            <a href="/musica">Musica
                <i class="fas fa-chevron-down menu-indicator desktop-indicator"></i>
            </a>
            <input type="checkbox" id="submenu-toggle-musica" class="submenu-toggle-checkbox">
            <label for="submenu-toggle-musica" class="submenu-toggle-label" aria-label="Desplegar Musica">
                <i class="fas fa-chevron-down menu-indicator mobile-indicator"></i>
            </label>
            <ul class="submenu">
                <li><a href="#">Sub Musica 1</a></li>
                <li><a href="#">Sub Musica 2</a></li>
                <li><a href="#">Sub Musica 3</a></li>
            </ul>
        </li>
        <li><a href="#">Contactos</a></li>
    </ul>
</nav>

<style>
/* ------ Variables CSS para fácil personalización ------ */
:root {
    --nav-bg: #2c3e50; /* Azul oscuro petróleo */
    --nav-text-color: #ecf0f1; /* Blanco nube */
    --nav-hover-bg: #34495e; /* Gris azulado oscuro */
    --nav-hover-text-color: #ffffff;
    --submenu-bg: #34495e;
    --submenu-text-color: #bdc3c7; /* Gris claro */
    --submenu-hover-bg: #4a6276;
    --submenu-hover-text-color: #ffffff;
    --accent-color: #e74c3c; /* Rojo coral */
    --border-color: #4a6276; /* Borde sutil */
    --nav-height: 60px;
    --menu-transition-speed: 0.3s;
}

/* ------ Reset Básico y Estilos Generales ------ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    padding-top: var(--nav-height);
    background-color: #f4f4f4;
    color: #333;
}

/* ------ Contenedor Principal del Menú ------ */
#modern-nav {
    background-color: var(--nav-bg);
    color: var(--nav-text-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    padding: 0 20px;
}

/* ------ Checkbox para Toggle (oculto) ------ */
.menu-toggle-checkbox,
.submenu-toggle-checkbox {
    display: none;
}

/* ------ Icono Hamburguesa (Móvil) ------ */
.menu-toggle-label {
    display: block;
    cursor: pointer;
    padding: 10px;
    position: relative;
    z-index: 1001;
}

.hamburger-icon {
    display: block;
    position: relative;
    width: 25px;
    height: 3px;
    background-color: var(--nav-text-color);
    transition: all var(--menu-transition-speed) ease-in-out;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--nav-text-color);
    transition: all var(--menu-transition-speed) ease-in-out;
}

.hamburger-icon::before {
    top: -8px;
}

.hamburger-icon::after {
    bottom: -8px;
}

.menu-toggle-checkbox:checked + .menu-toggle-label .hamburger-icon {
    background-color: transparent;
}

.menu-toggle-checkbox:checked + .menu-toggle-label .hamburger-icon::before {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle-checkbox:checked + .menu-toggle-label .hamburger-icon::after {
    transform: translateY(-8px) rotate(-45deg);
}

/* ------ Lista Principal del Menú ------ */
.menu-list {
    list-style: none;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    width: 100%;
    background-color: var(--nav-bg);
    transform: translateX(-100%);
    transition: transform var(--menu-transition-speed) ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) inset;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
}

.menu-toggle-checkbox:checked ~ .menu-list {
    transform: translateX(0);
}

.menu-list li {
    position: relative;
    border-bottom: 1px solid var(--border-color);
}
.menu-list li:last-child {
    border-bottom: none;
}

.menu-list li a {
    display: block;
    padding: 15px 20px;
    color: var(--nav-text-color);
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    transition: background-color var(--menu-transition-speed) ease, color var(--menu-transition-speed) ease;
}

.menu-list li a:hover {
    background-color: var(--nav-hover-bg);
    color: var(--nav-hover-text-color);
}

/* ------ Estructura para elementos con submenú (Móvil) ------ */
.menu-list li.has-submenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.menu-list li.has-submenu > a {
    flex-grow: 1;
}

/* ------ Toggle para Submenús (Móvil) ------ */
.submenu-toggle-label {
    padding: 15px;
    cursor: pointer;
    color: var(--nav-text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------ Indicadores de Menú (Font Awesome) ------ */
.menu-indicator {
    font-size: 0.8em;
    margin-left: 8px;
    transition: transform var(--menu-transition-speed) ease;
    color: inherit;
}

.mobile-indicator {
    /* Estilos específicos para móvil si son necesarios */
}

.desktop-indicator {
    display: none;
}

.submenu-toggle-checkbox:checked + .submenu-toggle-label .mobile-indicator.fa-chevron-down {
    transform: rotate(180deg);
}

/* ------ Submenús (Móvil: Acordeón) ------ */
.submenu {
    list-style: none;
    width: 100%;
    background-color: var(--submenu-bg);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--menu-transition-speed) ease-in-out;
}

.submenu-toggle-checkbox:checked ~ .submenu {
    max-height: 1000px;
}

.submenu li {
    border-bottom: 1px solid var(--border-color);
}
.submenu li:last-child {
    border-bottom: none;
}

.submenu li a {
    padding: 12px 20px 12px 35px;
    color: var(--submenu-text-color);
    font-weight: normal;
    text-transform: none;
    font-size: 0.85em;
}

.submenu li a:hover {
    background-color: var(--submenu-hover-bg);
    color: var(--submenu-hover-text-color);
}

.submenu .submenu li a {
    padding-left: 50px;
}

/* ------ Estilos para Desktop (a partir de 769px) ------ */
@media (min-width: 769px) {
    #modern-nav {
        padding: 0;
        justify-content: center;
    }

    .menu-toggle-label {
        display: none;
    }

    .menu-list {
        position: static;
        display: flex;
        width: auto;
        transform: none;
        background-color: transparent;
        box-shadow: none;
        height: 100%;
        max-height: none;
        overflow-y: visible;
    }

    .menu-list li {
        border-bottom: none;
        height: 100%;
        display: flex;
        align-items: center;
    }

    .menu-list li a {
        padding: 0 15px;
        height: 100%;
        display: flex;
        align-items: center;
        border-right: 1px solid var(--border-color);
    }
    .menu-list li:last-child a {
        border-right: none;
    }

    .menu-list li a:hover,
    .menu-list li:hover > a {
        background-color: var(--nav-hover-bg);
        color: var(--nav-hover-text-color);
    }

    .submenu-toggle-label {
        display: none;
    }

    .mobile-indicator {
        display: none;
    }
    .desktop-indicator {
        display: inline-block;
    }

    .menu-list li.has-submenu:hover > a .desktop-indicator.fa-chevron-down {
        transform: rotate(180deg);
    }

    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 220px;
        background-color: var(--submenu-bg);
        box-shadow: 0 3px 6px rgba(0,0,0,0.15);
        border-radius: 0 0 4px 4px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        max-height: none;
        transition: opacity var(--menu-transition-speed) ease,
                    visibility var(--menu-transition-speed) ease,
                    transform var(--menu-transition-speed) ease;
    }

    .menu-list li:hover > .submenu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .submenu li {
        width: 100%;
    }
    .submenu li a {
        padding: 12px 20px;
        width: 100%;
        height: auto;
        border-right: none;
    }

    .submenu .submenu {
        top: 0;
        left: 100%;
        border-radius: 0 4px 4px 4px;
        transform: translateX(10px);
    }
    .submenu li:hover > .submenu {
        transform: translateX(0);
    }
}
</style>

3. Personaliza los Enlaces

El código incluye una estructura de ejemplo con categorías como "Temas", "Farándula", "Deportes", "Entretenimiento", "Música" y "Contactos". Modifica los enlaces (href="#") con las URLs de tus páginas o etiquetas de Blogger. Por ejemplo:

• Cambia href="/temas" por la URL de tu página de temas.
• Ajusta los nombres de los ítems y submenús según el contenido de tu blog.

4. Personaliza el Diseño

El menú usa variables CSS para que puedas cambiar colores fácilmente. Busca el bloque :root en el código CSS y ajusta:

• --nav-bg: Color de fondo del menú (por defecto: azul oscuro).
• --nav-text-color: Color del texto (por defecto: blanco).
• --accent-color: Color de acento para detalles (por defecto: rojo coral).

Por ejemplo, para un menú con fondo verde:

:root {
    --nav-bg: #27ae60; /* Verde esmeralda */
}

5. Guarda y Prueba

1. Guarda el gadget HTML/JavaScript.
2. Visualiza tu blog en modo escritorio y móvil para asegurarte de que el menú funciona correctamente.
3. Si necesitas ajustar el diseño, regresa al gadget y modifica el CSS.

---

Características Técnicas del Menú

Posición Fija y Scroll

El menú está diseñado con position: fixed para permanecer en la parte superior de la página, incluso al hacer scroll. Esto asegura que los visitantes siempre tengan acceso a la navegación, mejorando la usabilidad.

Responsive: Escritorio vs. Móvil

• En escritorio: Los submenús se despliegan al pasar el cursor (hover), con transiciones suaves y un diseño horizontal limpio.
• En móvil: El menú se transforma en un menú hamburguesa con un ícono animado. Los submenús funcionan como un acordeón, expandiéndose y colapsándose al hacer clic, ideal para pantallas pequeñas.

Transiciones Suaves y Efectos Visuales

Gracias a las propiedades CSS como transition, el menú ofrece animaciones fluidas al abrir/cerrar submenús o al interactuar con los ítems. Los íconos de Font Awesome (como las flechas) añaden un toque visual que indica claramente la presencia de submenús.

Colores Personalizables

El uso de variables CSS permite cambiar colores sin tocar la estructura del código. Esto es perfecto para adaptar el menú al estilo de tu blog, ya sea minimalista, vibrante o elegante.

---

Consejos para Optimizar tu Menú

• Prueba en diferentes dispositivos: Asegúrate de que el menú sea funcional en móviles, tablets y escritorios.
• Mantén la estructura simple: Evita demasiados niveles de submenús para no abrumar a los usuarios.
• Optimiza para SEO: Usa palabras clave de cola larga en los nombres de los ítems, como "tutoriales de tecnología" o "noticias de farándula", para mejorar el posicionamiento.

---

Solución de Problemas Comunes

• El menú no aparece: Verifica que el gadget HTML/JavaScript esté en la parte superior del diseño de Blogger.
• Los submenús no se expanden: Asegúrate de que el enlace a Font Awesome esté funcionando y que no haya conflictos con otros estilos de tu plantilla.
• Problemas de diseño: Revisa las variables CSS y ajusta los valores para que coincidan con el diseño de tu blog.

---

Conclusión

Con este menú desplegable responsive para Blogger, puedes llevar la navegación de tu blog al siguiente nivel. Es fácil de implementar, completamente personalizable y funciona sin JavaScript, lo que lo hace ligero y accesible. Sigue los pasos de este tutorial, ajusta los enlaces y colores a tu estilo, y disfruta de un blog más profesional y atractivo. 😎

¿Tienes dudas o quieres compartir cómo quedó tu menú? ¡Déjame un comentario! Y si te gustó este tutorial, compártelo con otros bloggers que quieran mejorar su sitio. ¡Nos vemos en el próximo post!

¡Déjanos 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.