In my home I have the following code:
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 );
}
/**
- Adds an event handler that runs when an input element’s value
is changed.
Read more - @param {$w.Event} event
*/
/**
- Adds an event handler that runs when the mouse pointer is moved
off of the element.
You can also define an event handler using the Properties and Events panel.
Read more
- @param {$w.MouseEvent} event
*/
export function StickyNavBarMenu1_mouseOut_1 ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
}
/**
- Adds an event handler that runs when the mouse pointer is moved
off of the element.
You can also define an event handler using the Properties and Events panel.
Read more
- @param {$w.MouseEvent} event
*/
export function StickyNavBarMenu1_mouseOut_2 ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
}
/**
- Adds an event handler that runs when the mouse pointer is moved
onto the element.
You can also define an event handler using the Properties and Events panel.
Read more
- @param {$w.MouseEvent} event
*/
export function Menu1_mouseIn_1 ( event ) {
// This function was added from the Properties & Events panel. To learn more, visit Velo: Working with the Properties & Events Panel | Help Center | Wix.com
// Add your code for this event here:
}
as you can see all is Menu but it is still not working!something might be wrong!
or the place of the code that I pasted is not correct?