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.
A continuación puede ver su demostración en el siguiente blog de demos
📌 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:
- Cambia los enlaces (#): Reemplázalos con las URLs de tu blog
- Modifica los colores: Edita los códigos HEX en las clases CSS
- 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
11 comentarios: