Add delay after using hamburger menu icon before activating again

Created on 15 August 2021, almost 3 years ago
Updated 1 February 2024, 5 months ago

I've noticed that some users experience frustrating behavior with the hamburger menu icon when opening and closing the menu on mobile. The button seems almost too responsive, sometimes opening and closing on the same press if the press is too slow or not deliberate enough. This results in some users having to repeatedly tap the icon trying to get it to simply open or close once.

Only users on ios/iphone devices have reported the behavior.

Could we add a very short delay, perhaps half a second or so, to the activation of the button - I think this would remedy unintentional, super-fast double-tapping.

✨ Feature request
Status

Needs work

Version

1.0

Component

Code

Created by

🇺🇸United States W01F

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • 🇮🇳India Preeti.chawla

    I have created a patch#2 to improve hamburger menu in Mobile. Added some delay while click on Hamburger menu. I have added video with Before and After state.
    Please review

  • 🇺🇸United States W01F

    Hi Preeti, the issue isn't so much that the transition is disruptive, as the speed with with the menu opens and closes is fine. But rather that a short delay should be added after pressing the icon before it can be activated again, to prevent a single, long tap or an accidental quick double-tap from simply open-closing the menu, which is unhelpful behavior.

  • 🇮🇳India Preeti.chawla

    HI @W01F Thanks for your feedback, As per your feedback I have created another patch#4. Now on double click menu are not open-close. Please review

  • Status changed to RTBC 5 months ago
  • 🇮🇳India Kanchan Bhogade

    Hi,
    I have verified and tested Patch 3228221-4 on Drupal version 11. x for Olivero Theme
    Patch Applied successfully!

    Testing steps:

    1. Install Drupal 11.x
    2. Set an Olivero theme
    3. Check hamburger menu for mobile view (Mostly ios)
    4. Apply the patch and check again for the same

    Test Result:
    When clicking on the hamburger menu open/close, a delay is added.

    Attaching GIF for reference.

    Moving to RTBC

  • Status changed to Needs work 5 months ago
  • 🇺🇸United States W01F

    First, thank you both for your work on this so far.

    I'm setting back to "needs work" and will endeavor to detail the issues a bit more here.

    The original issue was only about the potential for accidental double-tapping, resulting in a potentially frustrating menu access experience for users on mobile.

    The current delay as currently implemented actually degrades the user experience. Users expect immediate responsiveness when using buttons, links, anything really. So we don't want to disrupt (or delay) the near instantaneous open/close action of the menu upon a press.

    Rather, after a press and open/close action has been performed, we should add a short delay until the button again becomes functional.

    That is:

    1. User presses burger menu to open (or close).
    2. Trigger to open (or close) menu instantly fires and moves the menu.
    3. Burger menu button is deactivated for .5s (or whatever the current delay is fine)
    4. After delay, button becomes useable/clickable again.

    Thank you everyone, and I hope that helps.

Production build 0.69.0 2024