How to make a Dropdown Menu in Wix?

Today I will give you information about how to make a custom dropdown menu. First, I start by adding the menu buttons and the arrow icon to the page. I will add the dropdown feature along with the hover box feature, and I will give a small animation effect to the button. I place the box that will appear during the dropdown process on the page. Next thing I'm going to do is move on to the codes. After opening the 'Dev Mode' part, I am now ready to write the wix velo codes. Here I will use the expand() and collapse() functions.

The reason I don't use the hide() function is that this function takes up space on the page, while the collapse() function deletes the element from the page. In short, I am doing this so that there is no bug in the future. You can try both functions and see the difference.

I will write the codes in Masterpage.js because I want it to affect all pages. So the code will work on all pages.

Using onMouseIn() and onMouseOut() functions, I will make the box appear and disappear when hovering over the dropdown button, and I will give a nice effect with wix-animation.

I create the sub menus in the Box and make the settings in the Site menu. Since the mobile part has its own menu, it can hide the other menu from the mobile.

Don't delete it, just hide it!

Here is our dropdown menu ready. You can reach me on my youtube channel and here.

Dropdown menu velo code

import { timeline } from 'wix-animations';

$w.onReady(function () {
    $w('#servicesBox').collapse();
    $w('#up').hide();
	$w('#services').onMouseIn(() => {		
        dropDownShow($w('#servicesBox'),$w('#up'),$w('#down'));
    });    
    $w('#servicesBox').onMouseIn(() => {		
        dropDownShowBox($w('#servicesBox'),$w('#up'),$w('#down'));
    });

    $w('#services').onMouseOut(() => {		
        dropDownHide($w('#servicesBox'),$w('#up'),$w('#down'));
    });
    $w('#servicesBox').onMouseOut(() => {		
        dropDownHide($w('#servicesBox'),$w('#up'),$w('#down'));
    });     

});

function dropDownShow(services,up,down){
    var target1 = $w("#servicesBox")
    up.show();
    down.hide();
    timeline().add(target1, { y: 10, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' }).play();
    services.expand();   
}

function dropDownShowBox(services,up,down){
     up.show();
    down.hide();
    services.expand();   
}

function dropDownHide(services,up,down){
    var target1 = $w("#servicesBox")
    const reset = { y: 0, x: 0, scale: 1, duration: 600, easing: 'easeOutCirc' };
    up.hide();
    down.show();
    timeline().add(target1, reset).play();
    services.collapse();  
}

Youtube video