How to make a Mega Menu with Icons that follow the specific menu tabs, also with responsive actions

Ask the community
, , ,
1

Question:
How do I stick icons to each tab of a menu so that they follow the movement of the tab?

Product:
Wix Studio

What are you trying to achieve:
I want to add Icons to each tab of the (mega)menu. When hovering with the mouse over the tab/container it will change the image from black&white to the color version of it, also when clicked.
Actually I want the exact same effect as the menu from the Pokemoncenter website: Pokémon Center UK Official Site

I do have my own icons, I just want the same look and feel and how it reacts to the screen. When the window is being slid to smaller proportions (width) it will change to the hamburger menu from a point where the menu is getting too small. So the Images should also disappear from that point when going to the Hamburger menu.

The menu of Pokémoncenter has everything I want. I tried to inspect the code on that website to learn a bit but I am not a coder. I only can understand a bit of it and how it works but can’t make codes myself. (unless with AI or examples from others)

What have you already tried:

  • I tried one Menu with in each tab a big menu.
  • Multiple containers stacked horizontally
  • for each tab a new menu and stacked those horizontally.

Additional information:
If someone has an easy option on how to do this that would be great! Or maybe I’m overthinking it and I should delete my icons and just have a normal Mega Menu.

Thanks in advance!

2

It should be possible. I will have a play with it to see what is required.

1 Like
3

That would be GREAT!
I have been trying for so long (almost a week) that I’m not sure what to do anymore.
And I cant get to designing the rest of the site if I’m not sure how to menu will turn out.

It should be possible, but I do not know how to make this happen simply. It looked simple to do but still, here I am :rofl:

Let me know if you found something and thanks for being willing to play with it!

4

Hello GS_Shops,

You can add hover animations to boxes or start with a hover preset to create your menu.

Here is a sample with no code.

https://www.dev-site-1x8046.wix-dev-sites.org/hover

You can also do it with code but it isn’t necessary.

G

5

Hey Gus,

Thanks for replying.

So you suggest working with container boxes and 2 separate images with hover animation without using menu boxes?
Can I then stack them horizontally and make them disappear when the window width is made shorter to let it transfer automatically to a hamburger menu?

6
7

Hi @GS_Shops,

Thanks for the clarification.

For your design, you can create a container with two states.

In the first state, include your button.

In the second state, set up the container with the menu options.

Initially, keep the second container hidden.

Then, configure it so that when a user hovers over the button, the container with the menu options becomes visible.

Let me know if you need more details or assistance!

Best, Gus.

Example of custom hover menu

https://genius-pro.wixstudio.io/ifscapital

8

Hey ,I am also trying to find anwser to this.I have used this code in a button.

Code:

Note: I have also tried using Collapse & Expand instead of Show & Hide in the code.

Code:

/

//Menu
$w.onReady(function () {
    $w('#res-btn').onClick(() => {
        $w('#dropdownMenuRes').show(); // Show the element
		console.log("Executed");
    });
});
$w.onReady(function () {
    // Show the element with a "fade" effect on button hover
    $w("#res-btn").onMouseIn(() => {
        $w("#dropdownMenuRes").show("fade", { duration: 400 });
		console.log("Executed");
    });

    // Optionally hide the element when the mouse leaves the button
    $w("#res-btn").onMouseOut(() => {
        $w("#dropdownMenuRes").hide("fade", { duration: 400 });
		console.log("Executed");
    });
});

The console.log(); is used to see if in actual button is clicked or not.But it didn’t worked .:pensive:

9

Could you provide more details on what you’re trying to achieve? Wix is constantly upgrading its systems, and there’s a good chance you can accomplish your goal without any coding.

Here’s a test site featuring a menu button on desktop that opens on hover. Take a look, and let me know if this aligns with what you’re looking for—we can work together to refine the solution!

https://genius-pro.wixstudio.com/gssagents1-copy?rc=test-site

Looking forward to your thoughts!