When creating submenus in Wix Studio, items open one below the other when you hover over them with the mouse, instead of expanding sideways.

Show and tell
, , , ,
1

Hello, when creating a submenu within a submenu in Wix Studio, the submenus open one after the other. It’s not possible to open them next to the menu item. I solved this problem by coding with Wix Velo, and the result was successful. I wanted to share this with you as well.

**First, we add a button to the submenu. Example ID: “btnSubMenu”. We enable the “wrap content” setting in the submenu settings. We place a container box next to the submenu box; the location is up to you. Example container ID: “boxSubMenu”. Then, paste the code I will provide below into the masterPage.js file. Your problem will be completely solved.

CODE:

**
let closeTimer = null;

$w.onReady(() => {

$w('#boxSubMenu').hide();

$w('#btnSubMenu').onMouseIn(() => {
    if (closeTimer) {
        clearTimeout(closeTimer);
        closeTimer = null;
    }
    $w('#boxSubMenu').show("fade", { duration: 150 });
});

$w('#btnSubMenu').onMouseOut(() => {
    closeTimer = setTimeout(() => {
        $w('#boxSubMenu').hide("fade", { duration: 150 });
    }, 250);
});

$w('#boxSubMenu').onMouseIn(() => {
    if (closeTimer) {
        clearTimeout(closeTimer);
        closeTimer = null;
    }
});

$w('#boxSubMenu').onMouseOut(() => {
    closeTimer = setTimeout(() => {
        $w('#boxSubMenu').hide("fade", { duration: 150 });
    }, 250);
});

});