En este artículo, te explicaré cómo crear un menú flotante en WordPress con un popup dinámico utilizando únicamente código personalizado. Este tipo de menú es una excelente opción si quieres mejorar la experiencia de navegación en tu sitio, especialmente en dispositivos móviles. El menú flotante se mostrará como un botón en la esquina inferior derecha de la pantalla, y al hacer clic, se desplegará un popup elegante con las opciones de navegación.
El diseño de este menú flotante en WordPress destaca por incluir efectos visuales modernos, como un fondo translúcido con blur, bordes redondeados y animaciones suaves, que hacen que sea tanto funcional como visualmente atractivo. A continuación, te detallaré paso a paso cómo implementarlo y el propósito de cada parte del código.
Funciones del menú flotante
Registrar la ubicación del menú flotante
El primer paso para crear tu menú flotante en WordPress es registrar una nueva ubicación para el menú. Esto te permitirá asignar un menú existente o crear uno nuevo directamente desde el panel de administración, en la sección de Apariencia > Menús, y vincularlo a esta ubicación específica llamada «Menú Flotante». Este paso es esencial, ya que permite que WordPress reconozca y cargue el menú en el sitio. Sin esta configuración inicial, el menú flotante no podrá mostrarse en el popup.
Agregar el botón flotante y el popup
Una vez que la ubicación del menú está registrada, el siguiente paso es generar un botón flotante que aparecerá en la esquina inferior derecha de tu pantalla. Este botón flotante en WordPress actúa como un disparador: al hacer clic, se despliega un popup que contiene las opciones de navegación del menú que hayas configurado. El popup está diseñado para ser fácil de usar e incluye un botón de cierre que te permite ocultarlo de manera rápida y sencilla, ofreciendo una experiencia de usuario fluida.
Estilos del botón y el popup
Para que el menú flotante en WordPress sea visualmente atractivo, se aplica un diseño moderno y profesional al botón y al popup. A continuación, te detallo sus principales características:
- Botón flotante:
- Tiene una forma circular con un fondo llamativo, diseñado para destacar en cualquier diseño de página.
- Incluye sombras suaves y efectos de hover que realzan su interacción. Por ejemplo, al pasar el cursor, el botón aumenta ligeramente de tamaño para hacerlo más dinámico.
- Popup del menú flotante:
- El popup tiene un fondo translúcido con un efecto blur, lo que le da una apariencia elegante y moderna.
- Sus bordes redondeados y sombras profundas lo hacen destacar visualmente sin ser intrusivo.
- Las transiciones suaves al abrir y cerrar el popup ofrecen una experiencia más dinámica y profesional.
- Menú dentro del popup:
- Los enlaces del menú están cuidadosamente estilizados, con una tipografía refinada y espaciado uniforme para facilitar la navegación.
- Además, incluyen un efecto de hover que cambia el color de los enlaces, dándole un toque interactivo.
Script para abrir y cerrar el popup
El comportamiento dinámico del popup está controlado por un pequeño script de JavaScript personalizado. Este script asegura que el popup se abra al hacer clic en el botón flotante y se cierre al hacer clic en el botón de cierre dentro del popup. Esto se logra cambiando el estado de visibilidad del popup entre «mostrar» y «ocultar». El proceso es rápido y fluido, proporcionando una experiencia de usuario optimizada y sin interrupciones.
Asignar el menú flotante en el panel de WordPress
Una vez que el código está configurado, el último paso es ir al panel de administración de WordPress, específicamente a Apariencia > Menús, y asignar el menú que deseas a la ubicación «Menú Flotante». Aquí puedes elegir un menú ya existente o crear uno nuevo con las opciones de navegación que quieras mostrar en el popup. Una vez asignado, el código se encargará de conectar este menú con el botón flotante, haciéndolo visible y funcional en el frontend de tu sitio.
Con estos pasos, habrás creado un menú flotante responsive en WordPress que no solo mejora la experiencia de navegación de los usuarios, sino que también le da un toque moderno y profesional a tu sitio. ¡Perfecto para destacar en cualquier proyecto!
El siguiente código tienes que agregarlo en el functions.php de tu tema hijo o utilizar un plugin como CODE SNIPPETS.
// Registrar ubicación del menú flotante
function registrar_menu_flotante_popup() {
register_nav_menu('menu-flotante', __('Menú Flotante', 'nombre-del-tema'));
}
add_action('init', 'registrar_menu_flotante_popup');
// Mostrar botón flotante y popup del menú en el footer
function mostrar_menu_flotante_popup() {
if (has_nav_menu('menu-flotante')) {
echo '<div id="menu-flotante-button" class="menu-flotante-button" onclick="toggleMenuPopup()">
☰
</div>';
echo '<div id="menu-flotante-popup" class="menu-flotante-popup">
<div class="menu-popup-content">
<span class="close-popup" onclick="toggleMenuPopup()">✖</span>';
wp_nav_menu(array(
'theme_location' => 'menu-flotante',
'container' => 'nav',
'container_class' => 'popup-nav',
'menu_class' => 'popup-menu-items',
));
echo '</div></div>';
}
}
add_action('wp_footer', 'mostrar_menu_flotante_popup');
// Estilos CSS para el botón flotante y el popup
function estilos_menu_flotante_popup() {
echo '<style>
/* Botón flotante */
#menu-flotante-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: 60px;
background-color: #0073aa;
color: #fff;
border-radius: 50%;
text-align: center;
line-height: 60px;
font-size: 28px;
font-weight: bold;
z-index: 9999;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#menu-flotante-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}
/* Popup del menú */
#menu-flotante-popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(10px);
z-index: 9998;
animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.menu-popup-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(135deg, #ffffff, #f7f7f7);
width: 85%;
max-width: 400px;
padding: 30px 20px;
border-radius: 20px;
text-align: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
animation: scaleUp 0.3s ease-out;
}
@keyframes scaleUp {
from {
transform: translate(-50%, -50%) scale(0.9);
opacity: 0.5;
}
to {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.popup-menu-items {
list-style: none;
padding: 0;
margin: 20px 0 0;
}
.popup-menu-items li {
margin: 15px 0;
}
.popup-menu-items a {
text-decoration: none;
color: #333;
font-size: 20px;
font-weight: bold;
transition: color 0.3s ease;
}
.popup-menu-items a:hover {
color: #0073aa;
}
.close-popup {
position: absolute;
top: 15px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #333;
transition: color 0.3s ease;
}
.close-popup:hover {
color: #0073aa;
}
/* Extra responsive adjustments */
@media (max-width: 500px) {
.menu-popup-content {
width: 90%;
}
.popup-menu-items a {
font-size: 18px;
}
}
</style>';
}
add_action('wp_head', 'estilos_menu_flotante_popup');
// JavaScript para el botón flotante y popup
function script_menu_flotante_popup() {
echo '<script>
function toggleMenuPopup() {
var popup = document.getElementById("menu-flotante-popup");
if (popup.style.display === "block") {
popup.style.display = "none";
} else {
popup.style.display = "block";
}
}
</script>';
}
add_action('wp_footer', 'script_menu_flotante_popup');
Lenguaje del código: PHP (php)En conclusión, con este menú flotante responsive puedes mejorar la navegación de tu sitio de manera sencilla y elegante. Además de ser completamente funcional, el diseño moderno y las animaciones suaves lo hacen ideal para cualquier proyecto. No solo es atractivo visualmente, sino también eficiente, ya que no depende de plugins y puedes personalizarlo según tus necesidades.
Contáctame por WhatsApp para servicios de desarrollo personalizado, ajustes en tu tienda online o cualquier solución a medida que necesites.
➡️Haz clic aquí para contactarme por WhatsApp
Nos vemos en el siguiente tutorial.
Un saludo.
Deja tus opiniones o dudas en los comentarios.