Buttons in Dropdown menu are not working

naama-t-l · December 17, 2017, 3:39pm

I have created a nice dropdwon menu effect, and there are 2 boxes that contain lots of buttons. One box (PRODUCTS) is working fine, and all the buttons are directing to the relevant location. In the other box (SOLUTIONS) the buttons are showing their hyperlinks when hovered, but when clicked nothing happens… any idea WHY? I’m stuck, please help

yisrael-wix · December 17, 2017, 3:44pm

Hi Naama,

We’ll need more info to be able to determine what your problem is. Are you sure the links are valid? Maybe try a couple of links from the first dropdown and see if they work in the second dropdown. When you run your app, do you get any errors or warning messages in the Developer Console? Are you using any code?

Thanks

naama-t-l · December 17, 2017, 4:17pm

Hi Yisrael,

The buttons are linked to “page” within the site, so of course the links are valid, and yes the menus were created using code. I am sure there’s a problem in the code but I have no errors, except the usual 'parameter “event” is never used". Here’s a video showing everything including the code that is pasted on all pages.
https://www.useloom.com/share/9e9cca0b817647418e5b7dd5cdc0c545

Another issue I want to solves is to have the boxes close not only with onMouseOut from the boxes, but also onMouseClick on the buttons of course. I am guessing this is a problem because I used buttons that already have a command on Click… so any other way to make this happen?

yisrael-wix · December 17, 2017, 4:25pm

The buttons are linked to “page” within the site, so of course the links are valid,
A little advice: There is no such thing as “of course … valid”. Assume the worst and verify everything.

naama-t-l · December 17, 2017, 4:29pm

What I meant is, that it’s not broken hyperlinks or anything - when you link a button to page, you select the page from a list of pages on the site, rather than type in a URL… anyway, looking forward to see what you think. I am going bananas here

yisrael-wix · December 17, 2017, 4:31pm

I took a look at the video but it really doesn’t tell me anything about what you’re doing and how. It looks as if the menu just isn’t responding since you aren’t getting broken or “dead” pages. Perhaps the code for the menu isn’t wired up correctly, maybe the links are invalid and getting errors logged in the Developer console.

I just need more information to understand what the problem is.

Thanks

naama-t-l · December 17, 2017, 4:34pm

Hmmm… what other information do you need?..I’ll try to give you whatever I can to have you helping me to solve this

system · December 18, 2017, 12:39pm

Hi Naama, can you please share a link to your site?

naama-t-l · December 18, 2017, 1:19pm

No problem. Any way I can send it to you in private?

system · December 19, 2017, 8:41am

Nope… we know it’s a requested thing but right now it’s not an option :\
Sorry.

naama-t-l · December 20, 2017, 7:22am

I see… I really need the help so here you go…
https://tavas-online.wixsite.com/locapal-new

system · December 20, 2017, 9:15am

Hi Naama,

Found the problem

So… the buttons inside the (broken) drop down menu has a colliding behaviours:
They have both a Link set, and a code ‘onClick’ function:

So basically the Link is disregarded and the code should run instead.
Problem is: you do not have a function called ‘button79_onClick’ in your code, so nothing happens.
(BTW, if you do write that function, it runs).

Unfortunately, for some reason I can’t cancel this function binding (a bug probably, we’ll investigate).
The good news is that when you copy an element and paste it, the function binding does not get copied.

So I think that the best (and fastest) solution for you is to copy and paste the whole group of buttons (the Links should preserve), the remove the old group of buttons.

Let me know how it goes.

Liran.

naama-t-l · December 20, 2017, 9:24am

Thanks a lot for looking into this. I admit that the command collision is probably my fault, because I wanted it to both link to page + onClick close the box.

The reason I was trying this, is because that when you click a button, you are redirected to the relevant page but the box doesn’t close unless you move the mouse away from the box. When I realized this won’t work, I couldn’t delete the commands button123_onClick, which now I learned from you - is a bug.

No other choice but to recreate those buttons, which is a huge bummer because the the code is manually pasted into all the pages of the site! :_(

Any correct way to make the box close after clicking a button, besides closing the box when mouse-out?

admin-23 · December 20, 2017, 3:02pm

Hi Naama,

There is no need to copy and paste the mouseIn and mouseOut events to every single page.
Elements placed inside the header are visible on all pages, and can be easily accessed using Site code.
Simply copy them once to the Site code tab and you’re done.

naama-t-l · December 21, 2017, 4:02pm

Hi Ido,
The first time round I wrote the code in the “site” tab but it didn’t work, it was not responding. Also the boxes are not in the header. they are outside of it with “show on all pages”…

kellunwong · January 20, 2018, 8:11am

Hi Naama,

Would you mind teaching me how to implement this dropdwon menu effect in your site? Thank you very much.

webmaster-1 · January 20, 2018, 2:12pm

I’d like to see that code too! It sounds fantastic.

naama-t-l · March 3, 2018, 8:41am

For everyone asking, here is the code I used. I am not sure it is a beautiful one, but it works.
It’s not perfect because I still didn’t figure out how to make the dropdown menu disapear afer a button is clicked, so as long as you mouse didn’t move the menu will stay collapsed. Not a big deal but I woud love to solve it some day.

Notice how I made in the code also the changing color+bold on the main menu buttons:

export function ACCUEIL2_onMouseOut(event) {
$w(‘#ACCUEIL2’).hide();
$w(‘#ACCUEIL1’).show();
}

export function ACCUEIL1_onMouseIn(event) {
$w(‘#ACCUEIL1’).hide();
$w(‘#ACCUEIL2’).show();
$w(‘#PRODUITS2’).show();
$w(‘#PRODUITS1’).hide();
$w(‘#PRODUITSbox’).hide();
$w(‘#SOLUTIONS1’).show();
$w(‘#SOLUTIONS2’).hide();
$w(‘#SOLUTIONSbox’).hide();
$w(‘#ACCUEIL1’).hide();
$w(‘#ACCUEIL2’).show();
}

export function PRODUITS2_onMouseIn(event) {
$w(‘#PRODUITS2’).hide();
$w(‘#PRODUITS1’).show();
$w(‘#PRODUITSbox’).show();
$w(‘#ACCUEIL2’).hide();
$w(‘#ACCUEIL1’).show();
$w(‘#SOLUTIONSbox’).hide();
$w(‘#SOLUTIONS1’).show();
$w(‘#SOLUTIONS2’).hide();
$w(‘#SOCIETE1’).show();
$w(‘#SOCIETE2’).hide();
$w(‘#SOCIETEbox’).hide();
}

export function PRODUITSbox_mouseOut(event) {
$w(‘#PRODUITS2’).show();
$w(‘#PRODUITS1’).hide();
$w(‘#PRODUITSbox’).hide();
}
export function SOLUTIONS1_onMouseIn(event) {
$w(‘#SOLUTIONS1’).hide();
$w(‘#SOLUTIONS2’).show();
$w(‘#SOLUTIONSbox’).show();
$w(‘#PRODUITS2’).show();
$w(‘#PRODUITS1’).hide();
$w(‘#PRODUITSbox’).hide();
$w(‘#SOCIETE1’).show();
$w(‘#SOCIETE2’).hide();
$w(‘#SOCIETEbox’).hide();
$w(‘#ACCUEIL2’).hide();
$w(‘#ACCUEIL1’).show();
}

export function SOLUTIONSbox_onMouseOut(event) {
$w(‘#SOLUTIONS1’).show();
$w(‘#SOLUTIONS2’).hide();
$w(‘#SOLUTIONSbox’).hide();
}

export function SOCIETE1_onMouseIn(event) {
$w(‘#SOCIETE1’).hide();
$w(‘#SOCIETE2’).show();
$w(‘#SOCIETEbox’).show();
$w(‘#SOLUTIONS1’).show();
$w(‘#SOLUTIONS2’).hide();
$w(‘#SOLUTIONSbox’).hide();
$w(‘#ACCUEIL2’).hide();
$w(‘#ACCUEIL1’).show();
$w(‘#PRODUITS2’).show();
$w(‘#PRODUITS1’).hide();
$w(‘#PRODUITSbox’).hide();
}

export function SOCIETEbox_onMouseOut(event) {
$w(‘#SOCIETE1’).show();
$w(‘#SOCIETE2’).hide();
$w(‘#SOCIETEbox’).hide();
}

export function CONTACTER1_onMouseIn(event) {
$w(‘#CONTACTER1’).hide();
$w(‘#CONTACTER2’).show();
$w(‘#SOCIETE1’).show();
$w(‘#SOCIETE2’).hide();
$w(‘#SOCIETEbox’).hide();
$w(‘#SOLUTIONS1’).show();
$w(‘#SOLUTIONS2’).hide();
$w(‘#SOLUTIONSbox’).hide();
$w(‘#ACCUEIL2’).hide();
$w(‘#ACCUEIL1’).show();
$w(‘#PRODUITS2’).show();
$w(‘#PRODUITS1’).hide();
$w(‘#PRODUITSbox’).hide();
$w(‘#ACTUALITES2’).hide();
$w(‘#ACTUALITES1’).show();
}

export function CONTACTER2_onMouseOut(event) {
$w(‘#CONTACTER2’).hide();
$w(‘#CONTACTER1’).show();

}

export function ACTUALITES1_onMouseIn(event) {
$w(‘#ACTUALITES1’).hide();
$w(‘#ACTUALITES2’).show();
$w(‘#SOCIETE1’).show();
$w(‘#SOCIETE2’).hide();
$w(‘#SOCIETEbox’).hide();
$w(‘#SOLUTIONS1’).show();
$w(‘#SOLUTIONS2’).hide();
$w(‘#SOLUTIONSbox’).hide();
$w(‘#ACCUEIL2’).hide();
$w(‘#ACCUEIL1’).show();
$w(‘#PRODUITS2’).show();
$w(‘#PRODUITS1’).hide();
$w(‘#PRODUITSbox’).hide();
$w(‘#CONTACTER2’).hide();
$w(‘#CONTACTER1’).show();

}

export function ACTUALITES2_onMouseOut(event) {
$w(‘#ACTUALITES2’).hide();
$w(‘#ACTUALITES1’).show();
$w(‘#SOCIETE1’).show();
$w(‘#SOCIETE2’).hide();
$w(‘#SOCIETEbox’).hide();
$w(‘#SOLUTIONS1’).show();
$w(‘#SOLUTIONS2’).hide();
$w(‘#SOLUTIONSbox’).hide();
$w(‘#ACCUEIL2’).hide();
$w(‘#ACCUEIL1’).show();
$w(‘#PRODUITS2’).show();
$w(‘#PRODUITS1’).hide();
$w(‘#PRODUITSbox’).hide();
$w(‘#CONTACTER2’).hide();
$w(‘#CONTACTER1’).show();
}