Is it possible to create a sticky menu bar which when we hover over on each menu its name shows up?

Ask the community
,
2

Yes, it is possible. I made this: https://gusitepreview.wixsite.com/stickymenubar
This is the code and you will need buttons and container boxes.

function toggleFoldStikyMenu(index) {
    let $FoldStikyMenu = $w('#StickyNavBarMenu' + index);
    // Switch between menus
    if ($FoldStikyMenu.collapsed) {
        $FoldStikyMenu.expand();
    } else {
        $FoldStikyMenu.collapse();
    }
    // Close the other menus
    [1, 2, 3]
    .filter(idx => idx !== index)
        .forEach(idx => {
            $w('#StickyNavBarMenu' + idx).collapse();
        })
}
export function Menu1_mouseIn(event) {
    toggleFoldStikyMenu(1);
}
export function StickyNavBarMenu1_mouseOut(event) {
    toggleFoldStikyMenu(1);
}
export function Menu2_mouseIn(event) {
    toggleFoldStikyMenu(2);
}
export function StickyNavBarMenu2_mouseOut(event) {
    toggleFoldStikyMenu(2);
}
export function Menu3_mouseIn(event) {
    toggleFoldStikyMenu(3);
}
export function StickyNavBarMenu3_mouseOut(event) {
    toggleFoldStikyMenu(3);
}

Use MouseIn on the button that will call the coiner box.

export function Menu1_mouseIn(event) {
    toggleFoldStikyMenu(1);
}

Use MouseOut on the container box that will be hidden after the mouser exits.

export function StickyNavBarMenu1_mouseOut(event) {
    toggleFoldStikyMenu(1);
}

You have to name the container boxes the same name + the thigh number. For example, if you have 3 container boxes, you will name the “Box Name” + “Its Number”. In this case, I used it like this: StickyNavBarMenu1; StickyNavBarMenu2; StickyNavBarMenu3.

Replace “StickyNavBarMenu”, with the name of your container box.

$w('#StickyNavBarMenu'

If you have more container boxes, you should put their number in this part of the code.

[1, 2, 3]