I’m a complete newbie to code - I tend to just stick with design but whilst building a website for my church, I really wanted to explore a bit of code to create a certain effect. As Wix is a little limited in how you can design a drop down menu for a nav bar I thought to create my own - managed to figure it out after much googling and what I’ve got does work but it seems to be getting a bit stuck - in that, the drop down menus that should be disappearing once you move away at times do, and at times just stay up there?
So I’ve added in the mouse in and mouse out interactions which by themselves work fine, but I also wanted to add some animation to it and as the normal Wix animations only play once I added some animation directly to the code itself, but maybe because of that it’s not quite behaving itself.
Hopefully that all made sense… here’s a link that will demonstrate it:
https://loughtonbaptist.wixsite.com/site
Many thanks to anyone who can help!
My code is:
export function button12_onmouseIn(event) {
$w( ‘#menu1’ ).show( ‘glide’ ,{ “duration” : 100 , “delay” : 0 , “angle” : 180 , “distance” : 20 });
}
export function button12_onmouseOut(event) {
$w( ‘#menu1’ ).hide();
}
export function menu1_onmouseIn(event) {
$w( ‘#menu1’ ).show();
$w( ‘#button12’ ).disable()
}
export function menu1_onmouseOut(event) {
$w( ‘#menu1’ ).hide();
$w( ‘#button12’ ).enable()
}
///////////////////////////////////////////
export function button16_onmouseIn(event) {
$w( ‘#menu2’ ).show( ‘glide’ ,{ “duration” : 100 , “delay” : 0 , “angle” : 180 , “distance” : 20 });
}
export function menu2_onmouseOut(event) {
$w( ‘#menu2’ ).hide();
$w( ‘#button16’ ).enable()
}
export function button16_onmouseOut(event) {
$w( ‘#menu2’ ).hide();
}
export function menu2_onmouseIn(event) {
$w( ‘#menu2’ ).show();
$w( ‘#button16’ ).disable()
}
///////////////////////////////////////////
export function button20_onmouseIn(event) {
$w( ‘#menu3’ ).show( ‘glide’ ,{ “duration” : 100 , “delay” : 0 , “angle” : 180 , “distance” : 20 });
}
export function button20_onmouseOut(event) {
$w( ‘#menu3’ ).hide();
}
export function menu3_onmouseIn(event) {
$w( ‘#menu3’ ).show();
$w( ‘#button20’ ).disable()
}
export function menu3_onmouseOut(event) {
$w( ‘#menu3’ ).hide();
$w( ‘#button20’ ).enable()
}