Responsive Menu Bug
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
ASKER
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.