Getting dropdown to work on mobile

HTML & CSS
1

I am trying to get my dropdown menu (started here) to work on mobile.

The dropdown works fine on desktop but on mobile the first click shows the dropdown but a second click does not hide it. I assume my media query CSS is interfering with the process but my brain is overheating trying to fathom out where I’m going wrong.

I have a dummy working page here.

2

Hi. You can solve the problem using JS.

Basically what you have to do is:
if mobile › at first click add a class › this class shows the submenu › at second click remove the class and the menu is hidden

if desktop › you can use the same functionality or disable the JS function and use the CSS hover directly.

I’ll show you a working example that you can modify for your project: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown

3

Thanks Davide. I would rather get my version working than start again from scratch. One of the problems with W3schools is that they still use inline JS rather than event listeners.

4

Okay, so I have found the culprit. It’s the

nav ul li:hover ul {
    margin-top: 0px !important;
}

which I added so the on hover still worked.

What to do next…

5

If you are talking about the dropdown in the mobile menu then that’s because when you click the element the hover style is still applied by the mobile device. They treat a first touch as:hover and therefore even though your js does something the hover styles will also apply and keep the menu in view.

You could make the hover styles apply to only larger devices and avoid that issue.

e.g.

@media only screen and (min-width: 521px) {
	nav ul li:hover ul {
  		margin-top: 0px !important;
	}
}

Or better still you could detect touch with JS and use a class on the html element to separate the appropriate styles for touch and no touch.

<script>
// detect No touch 
if (!("ontouchstart" in document.documentElement)) {
  	document.documentElement.className += " no-touch";
}
</script>

Put that script high in the head of the page and then you can use the CSS to control the hover.

.no-touch nav ul li:hover ul {
  		margin-top: 0px !important;
}

That will avoid the conflict with the pseudo hover event on touch devices at all screen sizes. You should also think about putting the submenus back in the flow when in collapse state otherwise it looks awkward.

Hover drop down menus are very hard to do accessibly and nicely for all devices.

The easiest solution is not to have a hover menu at all but make it a click menu for everyone and you avoid the problem altogether, Click menus are much more accessible to users with motor problems as they cannot hold the mouse over the correct item long enough in order to navigate.

Finally you also need to build in keyboard accessibility for the menus and that is also quite a complex task. There are very few dropdown menus around that are accessible to all unfortunately.

2 Likes
6

I’m beginning to think that! :slight_smile:

I usually add a “dummy” page with links to the sub-pages for dropdowns but I didn’t want to do that this time.

2 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.