Responsive Menu Bug

tel2
tel2 used Ask the Experts™
on
Hi Web Experts,

I’ve found a menu on W3Schools which would probably suit my website quite well, because it’s lite (and has very little JavaScript and no external links except font-awesome which I can easily workaround), is 2 level, simple and responsive (using a hamburger menu).  Here’s the info on it, and here’s the demo.

It seems to work quite well except for some minor problems (some of which I might be able to work around myself), but one problem I don’t know how to fix is:

If I add more “Dropdown” menus (which I’ve done here), then on my phone click “Dropdown 1”, then change my mind and click “Dropdown 2”, it opens “Dropdown 2” so I can see the items under it, but within a second it automatically takes the 3rd option under the “Dropdown 2” menu (“Link 2C”).  (I guess this is related to the fact that “Link 2C” appears in the same position that “Dropdown 2” was before I clicked “Dropdown 2”.)  This problem happens on my phone (Samsung J7) in both browsers (Chrome and Samsung “Internet”), and I've also noticed it on a Samsung J5 and old Samsung Gio.  (No such problem occurs if I click "Dropdown 2" then "Dropdown 1".)

Is anyone able to offer a fix for this, please?

Thanks.
tel2
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Analyst Developer
Distinguished Expert 2018
Commented:
It's a common problem comes from dropdown menu hover on mobile browsers, since the hover option doesn't work in touch devices as in the desktop, take a look at :

https://stampede-design.com/blog/dropdown-menu-hover/#.XDyn0lxKiM8

To prevent this you could use click instead of hover.

Working sample using jQuery

Author

Commented:
Hi Zakaria,

Nice work!  It seems to work well, thank you for your time and effort!
And it even makes things nicer by closing a dropdown menu when I tap it a 2nd time on my phone.

I might use your solution if I can't find a better option, but any ideas how I can make it so it works without jQuery?  I'm trying to make this as lite as possible, as implied at the top of my original post.

Ideally it would be nice if the non-touch devices could just hover to dropdown the menus, but I guess that's where the 1st link you gave me comes in.

Author

Commented:
Having not heard anything more from anyone about this, I've now closed this and awarded points to Zakaria.

Thanks again for your solution, Zakaria!

I might ask for a more light alternative on another site sometime, although your solution is reasonably light.

tel2

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial