Dim menu elements when hovering over one

Is it possible to create a menu with multiple pages where once you hover over one option, instead of it changing the look of the element that is being hovered over, it darkens the other options?
Hopefully that makes sense.
An example of this happening is on this website: https://www.corridordigital.com with the top right menu.
Thanks.

1 Like

You can do it if you create a custom menu of your own and don’t use Wix menus .

Firstly, I would go through the menu options within the Wix Editor already and see if you can find one that is what you need or is similar to it.

Otherwise you will have to make up your own code for either your own menu or a separate element to be displayed over the other menu choices which changes with each menu option chosen.

You can’t use hover with Wix, it has to be either onMouseIn and onMouseOut, or onViewportEnter and onViewportLeave.
https://www.wix.com/corvid/reference/$w.Element.html#onMouseIn
https://www.wix.com/corvid/reference/$w.Element.html#onMouseOut
https://www.wix.com/corvid/reference/$w.ViewportMixin.html

Plus, note that this won’t work on mobile devices, so you either have to change it to onClick for mobile or not have it shown on mobile or change the design of it for mobile.
https://www.wix.com/corvid/reference/wix-window.html#formFactor

As for the effects then you can use the following.
https://www.wix.com/corvid/reference/$w.EffectOptions.html

Or simply show and hide or expand and collapse.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html

  • if you want to have this exact effect, and you don’t want to crate a menu of your own, maybe you can do the following workaround (but I’m telling you upfront, it’s not an elegant solution, and i’ve never tested it):
  1. Put 2 menus one over the other (2 layers).

  2. Make the one in the back hidden by default.

  3. Design the one on the front as you wish.

  4. Add an onMouseIn() function to the front-menu that hides the front menu and shows the back menu.

  5. For the back-menu : go to its setting and set the text to be in the background color, and the hover text color to be as you want.

  6. Add an onMoseOut() function to the back-menu that does the opposite.