Disabled dropdown menu hover problem

HTML & CSS
1

Hello,

I have a problem with a disabled dropdown menu.

To simplify let’s talk of only three breakpoints: mobile, tablet and desktop. For the mobile version I am using a hamburger menu with enabled dropdown. For tablet und desktop I am using a classic menu without a dropdown.

I disabled it with the following code:

@media only screen and (min-width: 768px) {
    .j-nav-has-children > ul {
        visibility : hidden;
    }
}

It works pretty well on desktop but on tablet I now have to double click the nav-item due to the hover effect that actually does nothing because the dropdown is deactivated. Is there a possibility to make the item one-click for the tablet view?

The nav is basically build with ul and li

<ul class="cc-nav-level-0 j-nav-level-0">
   <li class="jmd-nav__list-item-0 j-nav-has-children">Menu
      <ul class="cc-nav-level-1 j-nav-level-1">
         <li class="jmd-nav__list-item-1">Submenu1</li>
         <li class="jmd-nav__list-item-1">Submenu2</li>
      </ul>
   </li>
</ul>

Greetings
Marcel

2

Hi marceln1, welcome to the forums!

What is the css code for that html you posted, the media rule is not the only I think. :wink:

3

Hi Erik_J,

as I am editing a site from a page builder, I don’t have access to all of the css code :frowning:

This is the site we are talking about: https://reidelbach.jimdo.com

If you want to know anything specific feel free to ask, I will provide you with the information :slight_smile:

Greetings Marcel

4

This is the default behaviour for ios so that you can get the hover effect on first touch and then a second touch activates the link. That’s why a lot of dropdown menus will still work on touch devices even though there is no hover as such.

However it can be confusing in some cases where there is no real hover effect to the link and some touch users may not think to touch again (or may not realise what is happening).

On navigation items I usually detect if ‘touch’ is available or not using JS and then have the JS add a class to the html element indicating if available or not.

e.g. add this class to the html element by default without using JS:

<html class="hasHover">

Then use js to detect if touch is supported and remove that class and add a different one which produces this result:

<html class="noHover">

With the above code in place you can re-write your menu rules so that any instances of :hover rules are prefixed with the ‘hasHover’ class.

e.g.

.hasHover ul#nav a:hover{background:red}

In that way touch devices do not get hover effects interfering with their actions. Of course that may mean rewriting many of the menu rules to accommodate this.

Here is a live example of that code so just view source to see appropriate html,css and JS.

http://www.pmob.co.uk/temp2/touch-hover-detect.html

It may be simpler when trying to fix something after the page has been coded to detect a click with js and act accordingly as mentioned in this article.

Hope that helps. :slight_smile:

.

1 Like
5

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