How to open hamburger menu on hover, close when link clicked on mobile?

General topics
1

Hey everyone, has anyone had good luck with hamburger menus? There are a few functions I’m trying to figure out, and would appreciate any guidance on any of the following functions! I’d love a menu that could ideally:

  • Web menu opens when cursor hovers over button
  • Web menu closes automatically when cursor moves off menu box
  • Web/Mobile menu closes when any menu item link is selected
  • Mobile menu hamburger icon switches to X when menu is open
2

Hi @RinseandRepeat I can suggest the following solutions.

Web menu opens when cursor hovers over button
You can create multiple triggers for animations. So creating a menu button for desktop and one for mobile that have different effects on trigger.

Web/Mobile menu closes when any menu item link is selected
Again you can make a trigger when clicking a link to toggle the menu effect.

Mobile menu hamburger icon switches to X when menu is open
You’ll need to elements ontop of each other, on clicking the menu icon, the opacity is set to 0% and then the other element ‘X’ is then changed to 100% opacity.

If this proves to be too much to create using the ReadyMag tools. I suggest with fixed navigation to code one yourself and insert into the head of your project.

1 Like