(function() {
    const antiFlashCSS = document.createElement('style');
    antiFlashCSS.textContent = `
        .bf-loading .megamenu-002 {
            opacity: 0 !important;
            visibility: hidden !important;
        }
    `;
    document.head.appendChild(antiFlashCSS);
    document.documentElement.classList.add('bf-loading');
})();

document.addEventListener('DOMContentLoaded', function() {
    const CONFIG = {
        triggerAttribute: 'trigger-002',
        menuClass: 'megamenu-002',
        overlayClass: 'bf-blur-overlay',
        enableBlur: false,
        blurIntensity: 8,
        overlayOpacity: 0.1,
        textColor: '#ffffff'
    };

    const style = document.createElement('style');
    style.textContent = `
        .${CONFIG.menuClass} {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            clip-path: inset(0 0 100% 0);
            transform: translateY(-3px);
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 9999;
            transition: opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1), 
                        clip-path 0.55s cubic-bezier(0.19, 1, 0.22, 1), 
                        transform 0.55s cubic-bezier(0.19, 1, 0.22, 1),
                        visibility 0s linear 0.55s;
            will-change: opacity, clip-path, transform;
        }

        .${CONFIG.menuClass}.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            clip-path: inset(0 0 0% 0);
            transform: translateY(0);
            transition: opacity 0.55s cubic-bezier(0.19, 1, 0.22, 1), 
                        clip-path 0.55s cubic-bezier(0.19, 1, 0.22, 1), 
                        transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .${CONFIG.menuClass} > * {
            opacity: 0;
            transform: translateY(-6px);
            transition: opacity 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.12s, 
                        transform 0.6s cubic-bezier(0.19, 1, 0.22, 1) 0.12s;
            will-change: opacity, transform;
        }

        .${CONFIG.menuClass}.active > * {
            opacity: 1;
            transform: translateY(0);
        }

        [${CONFIG.triggerAttribute}] {
            transition: background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), 
                        box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1),
                        border-radius 0.25s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            z-index: 1;
            will-change: background-color, box-shadow, border-radius;
        }

        [${CONFIG.triggerAttribute}].active-trigger {
            background-color: rgba(0, 0, 0, 1);
            border-radius: 6px;
            padding: 4px 8px;
            margin: -4px -8px;
            z-index: 1000;
        }

        [${CONFIG.triggerAttribute}].active-trigger,
        [${CONFIG.triggerAttribute}].active-trigger * {
            color: ${CONFIG.textColor} !important;
            transition: color 0.25s cubic-bezier(0.23, 1, 0.32, 1);
        }

        .${CONFIG.menuClass}.instant-close,
        .${CONFIG.menuClass}.instant-close > * {
            transition: none !important;
        }


    `;
    document.head.appendChild(style);

    const overlay = null;

    const menuTriggers = document.querySelectorAll(`[${CONFIG.triggerAttribute}]`);
    const menus = document.querySelectorAll(`.${CONFIG.menuClass}`);
    const animatingMenus = new Set();

    menus.forEach(menu => {
        menu.classList.remove('active');
        const parent = menu.parentElement;
        if (parent && getComputedStyle(parent).position === 'static') {
            parent.style.position = 'relative';
        }
    });

    document.documentElement.classList.remove('bf-loading');

    function updateTriggerState(targetId, isActive) {
        menuTriggers.forEach(trigger => {
            const triggerId = trigger.getAttribute(CONFIG.triggerAttribute);
            if (triggerId === targetId) {
                if (isActive) {
                    trigger.style.zIndex = '1000';
                    trigger.classList.add('active-trigger');
                } else {
                    trigger.classList.remove('active-trigger');
                    setTimeout(() => {
                        if (!trigger.classList.contains('active-trigger')) {
                            trigger.style.zIndex = '1';
                        }
                    }, 300);
                }
            }
        });
    }

    function handleMenuTransition(menu, isClosing, instantClose = false) {
        const menuId = menu.id;

        if (animatingMenus.has(menuId)) {
            return;
        }

        animatingMenus.add(menuId);

        if (instantClose) {
            menu.classList.add('instant-close');
            menu.classList.remove('active');
            
            updateTriggerState(menuId, false);
            
            setTimeout(() => {
                menu.classList.remove('instant-close');
                animatingMenus.delete(menuId);
            }, 50);
            return;
        }

        if (isClosing) {
            menu.classList.remove('active');
            
            updateTriggerState(menuId, false);
            
            setTimeout(() => {
                animatingMenus.delete(menuId);
            }, 550);
        } else {
            menu.classList.add('active');
            
            updateTriggerState(menuId, true);
            setTimeout(() => {
                animatingMenus.delete(menuId);
            }, 50);
        }
    }

    function closeAllMenus(exceptMenuId = null) {
        menus.forEach(menu => {
            if (menu.id !== exceptMenuId && menu.classList.contains('active')) {
                handleMenuTransition(menu, true, !!exceptMenuId);
            }
        });
    }

    menuTriggers.forEach(trigger => {
        trigger.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const targetId = this.getAttribute(CONFIG.triggerAttribute);
            const targetMenu = document.getElementById(targetId);
            
            if (!targetMenu) {
                console.warn(`Menu not found: ${targetId}`);
                return;
            }

            if (animatingMenus.has(targetId)) {
                return;
            }

            if (targetMenu.classList.contains('active')) {
                handleMenuTransition(targetMenu, true);
                return;
            }

            closeAllMenus(targetId);
            handleMenuTransition(targetMenu, false);
        });
    });

    document.addEventListener('click', function(e) {
        const isClickInsideMenu = Array.from(menus).some(menu => menu.contains(e.target));
        const isClickOnTrigger = Array.from(menuTriggers).some(trigger => trigger.contains(e.target));
        
        if (!isClickInsideMenu && !isClickOnTrigger) {
            closeAllMenus();
        }
    });

    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeAllMenus();
        }
    });
});
  • Products
    • Back
    • Categories
      Innovative PossibilitiesLorem ipsum dolor sit amet, consectetur adipiscing elit.
      Shape the FutureLorem ipsum dolor sit amet, consectetur adipiscing elit.
      Smart Tech PowerLorem ipsum dolor sit amet, consectetur adipiscing elit.
      Solutions Beam
      Tech Startups
      eCommerce Platforms
      Educational Apps
      Nonprofits Organizations
      Creative Agencies
      Small Businesses
      Freelancer Tools
      Financial Service
      Need different solutions?For teams fo 248+ with advanced secutiry, control, and support.
      Talk to Sales
    • ServicesAboutContact
    body:not([data-builder-mode]) .brxe-dropdown[data-static] .brx-dropdown-content {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: fit-content;
    min-height: 100%;
    box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.10), 
                0px 3px 3px rgba(3, 7, 18, 0.08), 
                0px 6px 6px rgba(3, 7, 18, 0.06), 
                0px 10px 10px rgba(3, 7, 18, 0.04), 
                0px 16px 16px rgba(3, 7, 18, 0.02);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    visibility: visible;
    transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1);
    z-index: 1000;
}

body:not([data-builder-mode]) .brxe-dropdown[data-static].open > .brx-dropdown-content,
body:not([data-builder-mode]) .brxe-dropdown[data-static] .open > .brx-dropdown-content {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

body:not([data-builder-mode]) .brxe-dropdown[data-static] .brx-dropdown-content > * {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

body:not([data-builder-mode]) .brxe-dropdown[data-static].open .brx-dropdown-content > *,
body:not([data-builder-mode]) .brxe-dropdown[data-static] .open .brx-dropdown-content > * {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0.2s;
}

body:not([data-builder-mode]) .brxe-dropdown[data-static] .brx-dropdown-content.closing {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: clip-path 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

body:not([data-builder-mode]) .brxe-dropdown[data-static] .brx-dropdown-content.closing > * {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    transition-delay: 0s;
}

body.menu-open {
    overflow: hidden;
}
    function simulateButtonClick(selector) {
    const targetButton = document.querySelector(selector);
    if (targetButton) {
        // Comprueba si es un botón de cierre de menú
        if (selector.includes('.BF-menu .brx-submenu-toggle > button[aria-expanded="true"]')) {
            // Encuentra el contenido del dropdown
            const dropdown = targetButton.closest('.brxe-dropdown[data-static]');
            if (dropdown) {
                const dropdownContent = dropdown.querySelector('.brx-dropdown-content');
                if (dropdownContent) {
                    // Añade la clase de cierre para la animación
                    dropdownContent.classList.add('closing');
                    
                    // Espera a que termine la animación y luego cierra realmente
                    setTimeout(function() {
                        targetButton.click();
                        // Elimina la clase closing después
                        setTimeout(function() {
                            dropdownContent.classList.remove('closing');
                        }, 50);
                    }, 500); // Mismo tiempo que la transición CSS
                    return; // Salimos para no ejecutar el click normal
                }
            }
        }
        
        // Comportamiento normal para otros botones
        targetButton.click();
    } else {
        console.error(`Button with selector "${selector}" not found.`);
    }
}

// Inicialización cuando el DOM esté listo
document.addEventListener('DOMContentLoaded', function() {
    // Si necesitas alguna inicialización adicional, puedes colocarla aquí
});

    ¡Hola, mundo!

    jonsivari·8 de diciembre de 2025·1 comentario

    Te damos la bienvenida a WordPress. Esta es tu primera entrada. Edítala o bórrala, ¡luego empieza a escribir!

    jonsivari

    Entradas relacionadas

    1 comentario

    Deja tu comentario