CODEWITHSUNDEEP
jqueryhtmlipadcss
jsuissa
jsuissa

Reputation: 1762

Typical CSS menu dropdown hover issue with iPad

We're having a common issue with hover states and CSS menus on the iPad. Because it doesn't recognize hover states it's not allowing a selection.

We've tried most of the common workarounds like onClick="return true" and using jQuery to create a dynamic hover class to replicate :hover and a few others, which I've removed now to clean the code a bit. I'm sure we're missing something that should be obvious.

Any help pointing me in the right direction on this would be greatly appreciated.

Link: iar.suissamesser.com

Upvotes: 3

Views: 15112

Answers (5)

Simon E.
Simon E.

Reputation: 58500

I've been able to get this to work quite well without Javascript.

The key pieces of CSS:

/* hide submenu by default */
.nav .submenu {
  display: none; 
}
/* show submenu on :hover and :focus-within */
.nav li:hover .submenu, .nav li:focus-within .submenu {
  display: block; 
}

To get the :hover to work correctly on iPad, you need to add a tabindex to your top-level menu items:

<ul class="nav">
  <li tabindex="0">
    Menu Item
    <ul class="submenu">
      <li>...</li>
    </ul>
  </li>
</ul>

And then to be able to close the menu, you need to add a tabindex to the <body> tag also:

<body tabindex="0">

The good thing about this approach is that it also allows keyboard navigation, and is good for accessibility.

Upvotes: 0

Jason Lydon
Jason Lydon

Reputation: 7180

I assume you are talking about the menu, correct? What I do in this case, is add another line to my css :hover selector. The idea is this, on click, add a class to the #nav like 'btn1. This would also require you to add a class to your list-items.
CSS

#nav li:hover > ul,
#nav.btn1 li.btn1 > ul {
    display: block;
}

HTML

<ul class="clearfix btn1" id="nav">
  <li class="btn1"><a href="http://iar.suissamesser.com/about-us/campus">ABOUT US</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/about-us/campus">Campus</a></li>
      <li><a href="http://iar.suissamesser.com/about-us/history-mission">History &amp; Mission</a></li>
    </ul>
  </li>
  <li class="btn2"><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses" >PARENTS</a><br />
    <ul>
      <li><a href="http://iar.suissamesser.com/parents/accreditation-and-licenses">Accreditation and Licenses</a></li>

JS

$("#nav > li > a").on("click", toggleNav);
var toggleNav = function(evt){
  var clicked = $(this).parent().attr('class');
  $("#nav").removeClass("btn1 btn2 btn3 btn4 ...").addClass(clicked);
  evt.preventDefault();
}

Upvotes: 3

user1708899
user1708899

Reputation: 21

this is a late late late response, but.

you dont actually have to use any kind of jquery or code, you just need to confuse or override the ipad logic in the css.

try this in your css

.navigation li ul
{
display:none;
}
.navigation li:hover ul
{
display:block;  
}
.navigation > li:hover
{
background-color:#000;  
}

as i understand, this stops the ipad cascading into the li and you hitting the a href because you did a hover on the li, but, when the sub menu is open, the a becomes the next responder because the li already has a hover state active.

this was discovered by accident.

html would be like this

<ul class="navigation">
<li><a href="http://www.google.com">test link</a>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
<li><a href="#www.google.com">test link</a>
<li><a href="#www.google.com">test link</a>
</ul>

Upvotes: 0

Lekshmi
Lekshmi

Reputation: 45

Include the below code in a footer file

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
}

Upvotes: 0

Colt Stumpf
Colt Stumpf

Reputation: 121

You should look at the example here http://www.hnldesign.nl/work/code/mouseover-hover-on-touch-devices-using-jquery/

It's pretty straight forward from there. Good Luck,

Upvotes: 3

Related Questions