Drop Down menu

Ask the community
,
1

Hi coders, I’d like to create this effect with code. Would it be possible?
You can see a mock up here, just click the little red menu button.
The effect you see here is due to the main menu being on a copy of the home page, of course.
The menu should just slide in from the top. But I’d love to do it properly in code!
https://kbwebs.wixsite.com/gaplighting-copy

Update: done this many times now. The code is easy. Just use a box, contracted on load.

2

Hi Kate,
You could do this by putting those contents in a box, setting it to be ‘hidden on load’, and setting the button to show the box by calling its .show() method. You actually don’t strictly need the box, but it’s simpler this way.
It requires a bit of JavaScript, but it’s very close to what’s shown in the following tutorial. So this is a good starting point:

https://www.wix.com/code/home/video-custom-interactions

3

Hello Uval,

I succeeded to create a menu with a drop down but I am struggling using it across the website. If I attach to header the buttons don’t transition as they should and the links don’t work, not to mention the drop-down. If I pin to screen and make it “Show on all Pages”, it’s the same thing. Any idea how to solve this mystery?

Another problem is the mouse out - it mouses out from the container only, but if I go left or right, the container says open…

Check out this clip… https://www.useloom.com/share/5b97b8bb357042078deba1da8e56b384

Thanks.

4

Naama, Can only answer your first part…I found that the standard Wix animations break the code. You have to add any animations in code.

5

Hi Naama,

  1. When attaching to header, the code should be written in the ‘SITE’ tab of the code editor… so when you do that, make sure to redefine ‘onMouseIn’.
  2. Regarding the mouse out thing… I guess you set mouseIn on the container of all buttons. It would be better to set in on the particular menu button (and not the whole container), and set ‘mouseOut’ accordingly.
    Not that this may cause the dropdown to close when moving from the button towards it. There are a few ways of solving that, like calling ‘hide()’ on ‘mouseIn’ of the previous and next menu buttons.

Liran.

6

Thanks a lot Liran, your tips were helpful, however the menu works perfectly only on the test page but when going to any other page, nothing behaves as it should, not to mention that the boxes don’t show because they are placed in the TEST PAGE… so as Kate mentioned. is I try to use “show on all pages” it brakes the code. Any ideas how I can use this menu properly on all the site’s pages?

Here’s a video showing the problem - https://www.useloom.com/share/635692e7201942dd92a0724754a6855c

7

Hi Naama,

Just like in Header components, ‘show on all pages’ components should have their code in the SITE tab.

I think that instead of trying to rewire the code in the SITE tab, it would be much easier to take a minute and start from the beginning with everything you know now:

  1. Create the menu (either manually or by copying the component).
  2. For the new menu - set it to be shown on all pages.
  3. Use properties panel to set ‘onClick’, ‘mouseIn’, ‘mouseOut’, etc. - since the components are set to be shown on all pages - this will place the code automatically in the SITE tab.
    You can, of course, copy the code that is inside the function body (just the body , not the name of the function and the wrapping block)… just make sure that you change the component IDs to be of the new ones created.

Liran.

8

OMG… :frowning: I already created the whole thing from scratch while the main menu is attached to the header before creating the code… Do you mean that I should also change all the boxes below (drop down elements) to “show on all pages”, and only then start the coding?.. having said that it means that I need to start over again because ALL the buttons now need a new ID name…

Am I right?

9

Hi Kate, It’s been some time since your original post however i wondered whether you managed to create the drop down menu? I’m just looking to create the same effect on my website but i am having trouble at the moment. Any help would be highly appreciated. Thanks

10

Hi, no, I don’t think so. And the site referenced above has now moved to WP :frowning:

11

Actually, I just re-read my post and the answer is yes, just use a strip that is contracted on load. Super easy. When you click the button it should .show() and click again to .hide()