JS Menú Orbital y Carrito flotante
En esta guía aprenderás cómo funciona el Menú Orbital (X) y el Botón Carrito flotante con control dinámico del footer, una de las características más inteligentes y visualmente atractivas de la plantilla NichoClean v2.0. Este sistema permite mantener tu menú y el acceso al carrito visibles y accesibles en todo momento, sin superponerse al pie de página, mejorando la experiencia de navegación móvil y optimizando la conversión en tiendas o blogs con catálogo.
¿Qué es el Menú Orbital (X)?
El Menú Orbital es un icono flotante que se transforma en una “X” al abrirse, desplegando un menú circular o lineal según tu diseño. Su objetivo es ofrecer un acceso rápido y elegante a las secciones principales del sitio sin ocupar espacio en pantalla. En NichoClean v2.0, este sistema está integrado de forma nativa y se sincroniza con el botón del carrito para evitar interferencias visuales cuando el usuario llega al footer.
¿Qué hace el Control Footer?
El Control Footer es un mecanismo inteligente que detecta la posición del pie de página y ajusta automáticamente la altura de los botones flotantes (menú orbital y carrito) para que nunca se oculten detrás del footer. Esto significa que, sin importar el tamaño de pantalla o la cantidad de contenido, ambos botones se elevan de forma suave cuando el usuario se acerca al final de la página.
Ventajas principales:
- Evita solapamientos entre el menú flotante y el footer.
- Optimiza la visibilidad del carrito en tiendas o catálogos.
- Mejora la experiencia del usuario móvil (UX).
- Aumenta la tasa de clics en menús o botones clave.
- No requiere librerías externas ni frameworks adicionales.
Cómo funciona el script
El script analiza en tiempo real la posición del footer y adapta los botones flotantes según la altura visible del navegador (viewport).
Además, diferencia entre versión desktop y móvil para aplicar comportamientos específicos:
- En móvil: el menú orbital se mueve junto con el carrito y se ajusta al acercarse al footer.
- En desktop: el menú se mantiene fijo, ya que el orbital se desactiva en pantallas grandes.
Configuración y comportamiento
No es necesario realizar ninguna configuración adicional. El script funciona de manera automática al detectar los elementos con las clases:
.menu-toggle: botón principal del menú orbital.nav.main-nav ul: lista de enlaces del menú..cart-float: botón o icono de carrito flotante.footer: pie de página del blog o tienda.
La plantilla NichoClean v2.0 ya incluye estos selectores de forma estándar, por lo que el sistema reconocerá automáticamente la estructura de tu blog sin necesidad de cambios.
Consejos de uso
- Evita duplicar el botón del carrito en el HTML para no generar conflictos.
- Si usas scripts de terceros (como chat flotante o botón de WhatsApp), verifica que no ocupen la misma esquina inferior.
- El orbital está pensado para usarse en móviles, por lo que puedes desactivarlo en desktop si no lo necesitas.
Compatibilidad
Este módulo es totalmente compatible con Blogger, ya que no depende de frameworks como jQuery. Funciona en todos los navegadores modernos (Chrome, Firefox, Edge, Opera y Safari) y se adapta automáticamente a resoluciones de pantalla pequeñas.
Resultado final
Con el JS Menú Orbital (X) + Botón Carrito activo, tu sitio ofrecerá una interfaz moderna, fluida y totalmente responsiva. El visitante siempre tendrá acceso rápido al menú y al carrito, incluso en dispositivos móviles, y todo se ajustará automáticamente al llegar al footer, sin afectar el diseño general.
Conclusión
El Menú Orbital con Control Footer es una mejora elegante y funcional dentro de la plantilla NichoClean v2.0. Su comportamiento inteligente ofrece una navegación fluida, reduce fricción en la experiencia de compra y mantiene tu diseño limpio y profesional. Si deseas una plantilla Blogger moderna, optimizada para SEO y con microinteracciones nativas, NichoClean v2.0 te ofrece una base sólida para destacar en cualquier nicho.
Aún no hay comentarios, sé el primero en comentar.
Publicar un comentario