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

Ask the community
,
8

In your first image, you have two toggleFoldStikyMenu ( index ) functions on the same page. Use this code in components that are always on the same page. The code in masterPage.JS and in the page will not work because when you leave that page and go to another, the code in masterPage.JS will not find the elements because they are not in view on all pages. For the one that is separated in its header, use this code below.

export function MenuTopBar_mouseIn(event) {
    $w('#StickyNavBarMenuTopBar').expand();
    $w('#MenuTopBar').collapse();
    MenuTopAnimation();
    NavbarTopAnimationExpand();
    NavbarTopAnimationCollapsed()
}
export function StickyNavBarMenuTopBar_mouseOut(event) {
    $w('#StickyNavBarMenuTopBar').collapse();
    $w('#MenuTopBar').expand();
    NavbarTopAnimationCollapsed();
}

function MenuTopAnimation() {
    const target = $w('#MenuTopBar');
    timeline()
        .add(target, { y: 0, x: 40, scale: 1, duration: 600, easing: 'easeOutElastic' })
        .play();

}

function NavbarTopAnimationExpand() {
    const target = $w('#StickyNavBarMenuTopBar');
    timeline()
        .add(target, { y: 0, x: 8, scale: 1, duration: 600, easing: 'easeOutElastic' })
        .play();

}

function NavbarTopAnimationCollapsed() {
    const target1 = $w('#StickyNavBarMenuTopBar');
    const target = $w('#MenuTopBar');
    const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutElastic' };
    timeline()
        .add(target1, reset)
        .add(target, reset)
        .play();
}

In your last image, put all as “Menu” + the number. the lowercase letter was a typo. In the code, only those with the first letter in capitals will be used.