script.js

class ImageRevealMenuHandler extends elementorModules.frontend.handlers.Base {
getDefaultSettings() {
return {
selectors: {
container: ‘.reveal-menu-container’,
menuItems: ‘.reveal-menu-item’,
bgImages: ‘.reveal-bg-image’
}
};
}

getDefaultElements() {
const selectors = this.getSettings(‘selectors’);
return {
$container: this.$element.find(selectors.container),
$menuItems: this.$element.find(selectors.menuItems),
$bgImages: this.$element.find(selectors.bgImages)
};
}

bindEvents() {
const $menuItems = this.elements.$menuItems;
const $bgImages = this.elements.$bgImages;

$menuItems.on(‘mouseenter’, (e) => {
const $currentItem = jQuery(e.currentTarget);
const targetIndex = $currentItem.data(‘index’);

$menuItems.removeClass(‘active’);
$currentItem.addClass(‘active’);

$bgImages.removeClass(‘active’);
$bgImages.filter(`[data-index=”${targetIndex}”]`).addClass(‘active’);
});
}
}

jQuery(window).on(‘elementor/frontend/init’, () => {
const addHandler = ($element) => {
elementorFrontend.elementsHandler.addHandler(ImageRevealMenuHandler, { $element });
};
elementorFrontend.hooks.addAction(‘frontend/element_ready/image_reveal_menu_2495a989.default’, addHandler);
});