0

i have a question to the CSS hover effect. I use a hover for my navigation to activate a submenu with the display class. On mobile devices I have the problem that there is no hover and so i only can click the main menu but can't see the submenu. Is there a way to make this work on mobile devices?

1

2 Answers 2

2

On mobile devices the hover property is useless as the user has to scroll the page with fingers, by hovering (keeping pressed) it fires other device options. So the best solution would be opening the submenu by clicking the main menu.

EDIT (as requested by OP):
http://jsfiddle.net/eyyuLs65/

EDIT 2:
http://jsfiddle.net/hp3hy96w/1/

4
  • How can I open the submenu with the first click and with the second click open the main menu link? Aug 25, 2014 at 8:18
  • By using jQuery or JavaScript?
    – Xriuk
    Aug 25, 2014 at 8:20
  • if the menu point is a link. how can i prevent that on the first click the submenu open and on the second click the link? And if I have more than one Main Menu how can I prevent that all submenus are opened? see here: jsfiddle.net/hp3hy96w Aug 25, 2014 at 11:14
  • See my EDIT 2, I've added an attribute counter, so you can have unlimited menus, cause the static var is good only for one. As of the link thing, if you haven't set any preventDefault to links, it opens the url of the link
    – Xriuk
    Aug 26, 2014 at 7:05
0

I use the ontouchstart event to fire a mouseenter event, hence this trickles down to a pseudo-class :hover event.

I use it for tooltip purposes to work on mobile devices.

In the following examples I add an event handler for all HTML Collections that have the class w3-tooltip

// On mobile devices the ontouchstart event exists, 
// so we get it to trigger a mouseenter event, hence a :hover() event
function misc_mobileSetup() {
  var list = document.getElementsByClassName("w3-tooltip");
  for (var i in list) {
    list[i].ontouchstart = function() {list[i].mouseenter();};
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.