2

I am new to web development and now i am faced with this problem of handling hover on devices like ipad. First i thought of removing css for hover and making it on click but, customer is insisting on having hover.

Heres the problem, I have bootstrap navbar with few menus that dropdown on hover. But on ipad the menu drops down after clicking on the menu (ex: learn) but doesnt disappear until i click on another navigation menu say "teach".

I want to do following things using javascript/jquery.

  1. Keep existing hover behavior on desktop and laptop

  2. On devices like iPad, i would like the menu to disappear under following circumstances
    (a) when clicked on the same menu item again
    (b) When clicked on submenu
    (c) When clicked outside the menu

Any sort of help here is appreciated.

Here is the fiddle http://jsfiddle.net/em656522/2/

whippits
  • 251
  • 2
  • 13
  • 3
    you can not. Most tablet / phones have a fallback for it these days. You could use something like flexnav or something to make icons that actually work though. – Danny van Holten Jan 22 '15 at 09:25
  • I find this plugin pretty good - http://cherne.net/brian/resources/jquery.hoverIntent.html – Pete Jan 22 '15 at 09:31
  • 1
    This is really a flaw in the design of the website. As a web developer it is important to educate your client on the media that we design for. If they continue - after you have explained the pitfalls - to insist that you use hover, they should be prepared to accept the fact that it won't work properly on iPad (just as if they insist on using Flash, that won't work either). – Joe Czucha Jan 22 '15 at 18:09

1 Answers1

0

Bootstrap's defaults are best web practices, so I would suggest staying closer in line with what's already there. The only thing you should do to customize your menu's behavior is perhaps add the hover dropdowns for desktop only. Bootstrap's responsive utility classes are also available for you to use.

You may want to read this question for some ways to approach your desktop dropdown menu.

Community
  • 1
  • 1
jmargolisvt
  • 5,722
  • 4
  • 29
  • 46