Custom drop-down menu

Ask the community
,
1

Hey,

I am trying to build a custom drop down menu for my web page as Wix still does not have an option for multi level drop down menus.

The structure I am trying to create is as follows:

I have a button in the top bar of the page that opens a box when clicked on (or hovered over, have not decided yet).
The box opened contains 8 buttons for further navigation. 5 of the buttons will lead straight to new pages when clicked on, while 3 of the buttons will open their own box when hovered over.
Of those new boxes, 2 will only have buttons to be clicked and led to to pages, while one will have two buttons which will open new boxes when hovered over. From those two last boxes there will only be buttons to be clicked and lead to new pages.

As of now, I am able to open and close the boxes using the “show” and “hide” functions. My problem is that I cannot seem to hide the boxes in more than one function. I would like the boxes to hide if the either the button that opened the box, or the box itself, is hovered away from. Currently, I can choose only one.

For example, if I open the menu with the button at the top, the menu opens. But if I hover away from the button without having been on the menubox, the box will stay open until I hover over it, and then hover away again.

I have tried to add the hide function to multiple elements, but the menu button always seem to override every other function, so the menu box will disapear as soon as I leave the button, even if I go straight to the box from the button. Is there any way to overcome this issue?

I am sorry if I maybe over explained this issue and maybe added some irrelevant information, I just want to make sure I give a full overview of my problem.

2

You write a lot of description, but anyone can see your current working (not working) code to give you any advise, whats wrong with your code.

3

Hello! Could you post your code where you’re implementing the hide and show functions so we can see how you’re handling it?

I would double-check to make sure you’re using the proper event-handlers – set show() using onMouseIn() and hide using onMouseOut() .

4

Thank you for your replies @emmy and @russian-dima

So, currently the code looks like this:

On the button that is opening the menu:

export function MenyKnapp_click ( event ) {
$w ( “#HovedmenyBox” ). show ();
}

This opens the menu when I click the button, and it works.

On one of the buttons in the main menu:

export function button20_mouseIn ( event ) {
$w ( “#BransjemenyBox” ). show ();
}

This opens one of the sub menus when the button is hovered over.

I have also added this on both the boxes (the sub-menu box has it own name on there):

export function HovedmenyBox_mouseOut ( event ) {
$w ( “#HovedmenyBox” ). hide ();
}

This hides the boxes when the cursor leaves the boxes, and it works.

However, I also want to hide the boxes when the cursor leaves other elements as well.
For example, When I scroll the cursor down the menu, the sub-menu opens when the button is hovered over. But, it will stay open until i hover the cursor over the sub-menu, and the hover the cursor away. That means it will look like this:

1497×403 165 KB

I want to make it so if I hover away from the sub-menu OR the button that opens the sub-menu, the sub-menu will disappear. Is that poosible, if so how do i fix this?

5

Your code…

$w.onReady(function() {
    $w('#MenyKnapp').onClick(()=>{
        $w("#HovedmenyBox").show('slide', {duration:500, direction: "top"})
    });

    $w('#button20').onMouseIn(()=>{
        $w("#BransjemenyBox").show('slide', {duration:500, direction: "bottom"})
    });

    $w('#HovedmenyBox').onMouseOut(()=>{
        $w("#HovedmenyBox").hide();
    });
});

First of all, please learn first to work SYSTEMATICALY! What do i mean?
When generating codes, it is always a big advantage to code a systematicaly way.
Also using just continiously numbered declarations are not the best way (just partly ok).

When you use something like…

$w('#MenyKnapp') <<---no element-prefix used here

…or something like…

$w('#button20')

…any extern-coder will understand whats going on in your code.
It is recommended to use a PREFIX for your elements inside of your variable.

RIGHT-WAY:

btnMenu1
btnMenu2
btnMenu3

btnSubmenu1
btnSubmenu2
btn....

inpFirstname
inpLastname
inpWhatever...

boxMainMenu
boxSubmenu

When you read this definitions, are you able to recognize which element it is?
Are you also able to recognize what could do this element?

Just by reading this, you already should be possible to understand which elements i may have used and what for. You even should be able to recognize immediately that maybe regarding the element-declarations, i could have a FORM on my page, without ever have seen any descriptions of the presented project. Reading and undestanding just by —> CODE!

ONLY POSSIBLE, if you also use this SYSTEMATICALCODING!

I hope you now understand why this is so important to define your element-ID always in a CODER-FIENDLY-WAY.

If your code structure would be good enough, you even would not have to show a pic of your menu-setup, because everything would be understandable just directly out of your code.

I want to make it so if I hover away from the sub-menu OR the button that opens the sub-menu, the sub-menu will disappear. Is that poosible, if so how do i fix this?
How to solve this?

Try to analyse your own sentences…, what do we have?

hover-away —> onMouseOut
from sub-menu —> let it be —> boxSubmenu
—> OR <----
btnSubmenu —> onMouseOut

That means, no matter which of the two elements gets triggered, they both do the same, right? → That means both do the same functionality? → Same FUNCTION?!

Oh, we just heard something about a → FUNCTION?

$w.onReady(function() {
    
});

function myFunction() {


}

Now let’s try to code it… (here we have out two options)…and both of them have to trigger the same function → hide/disapear → SubMenu

$w.onReady(function() {
    $w('#boxSubmenu').onMouseOut(()=>{
        myDisapearFunction();
    });
    $w('#btnSubmenu').onMouseOut(()=>{
        myDisapearFunction();
    });    
});

If you pay attention, now both of triggered events, starting the same function, to hide/disapear the Sub-Menu-Box.

function myDisapearFunction() {
    $w('#boxSubmenu').hide('fade');
}

Now try it again with all the new knowledge about JS-Coding.

6

Hey,

Thank you so much for your advice! It works fine now!

I am very new to coding, working mostly with graphic design, but they wanted som new featuures at my jobs web page that needed coding, so I had to jump into it with more or less zero experience.

Your input helped me understand a bir more about how coding works, and structuring it made it much easier to see my misakes and fix them.

So again, thanks a lot!