Depending on what you want to do, you could use another button in place of the container box. With animation, the code looks something like this:
import { timeline } from 'wix-animations';
function toggleFoldStikyMenu(index) {
let $FoldStikyMenu = $w('#StickyNavBarMenu' + index);
let $FoldMenu = $w('#Menu' + index);
// Switch between menus
if ($FoldStikyMenu.collapsed, $FoldMenu.expand) {
$FoldStikyMenu.expand();
$FoldMenu.collapse();
NavbarAnimationExpand(index)
} else {
$FoldStikyMenu.collapse();
$FoldMenu.expand();
NavbarAnimationCollapsed(index)
MenuAnimation(index)
}
// Close the other menus
[1, 2, 3]
.filter(idx => idx !== index)
.forEach(idx => {
$w('#StickyNavBarMenu' + idx).collapse();
$w('#Menu' + idx).expand();
NavbarAnimationCollapsed(index)
MenuAnimation(index)
})
$w('#StickyNavBarMenu' + index).onMouseOut(() => {
$w('#StickyNavBarMenu' + index).collapse();
$w('#Menu' + index).expand();
NavbarAnimationCollapsed(index)
})
}
function MenuAnimation(index) {
const target = $w('#Menu' + index);
timeline()
.add(target, { y: 0, x: 80, scale: 1, duration: 600, easing: 'easeOutElastic' })
.play();
}
function NavbarAnimationExpand(index) {
const target = $w('#StickyNavBarMenu' + index);
timeline()
.add(target, { y: 0, x: 140, scale: 1, duration: 600, easing: 'easeOutElastic' })
.play();
}
function NavbarAnimationCollapsed(index) {
const target1 = $w('#StickyNavBarMenu' + index);
const target = $w('#Menu' + index);
const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutElastic' };
timeline()
.add(target1, reset)
.add(target, reset)
.play();
}
export function Menu1_mouseIn(event) {
toggleFoldStikyMenu(1);
}
export function Menu2_mouseIn(event) {
toggleFoldStikyMenu(2);
}
export function Menu3_mouseIn(event) {
toggleFoldStikyMenu(3);
}
But I’m not a programming expert, so I don’t know if this way is correct. On my site it worked. The animations settings are just a demonstration. You can change them later.
As for the error on your site, which one is appearing?