Menu does not open levels on iPhone or iPad

Asked

Viewed 681 times

1

I programmed a website, and for the menu I used jQuery hoverdrop. But it doesn’t open at all on iPhone or iPad. Other phones and tablets work normally (it just takes a little longer to load depending on the speed of the internet). What can it be? And how can I solve this problem?

The HTML code I have is: 

<html>
<div class="pad1"></div>
<ul id="menu">
    <li><a href="index.html">home</a></li>
    <li class="sub"><a>curau</a>
        <ul>
            <li><a href="pg/quemsomos.html">quem somos</a></li>
            <li><a href="pg/clipping.html">clipping</a></li>
        </ul>
    </li>
    <li class="sub"><a>portfólio</a>
        <ul>
            <li><a href="pg/idvisual.html">id visual</a></li>
            <li><a href="pg/estamparia.html">estamparia</a></li>
            <li><a href="pg/campanha.html">campanhas</a></li>
            <li><a href="pg/outrosestudos.html">outros estudos</a></li>
            <li><a href="pg/outrostrabalhos.html">outros trabalhos</a></li>
            <li><a href="pg/inspiracoes.html">inspirações 2014</a></li>
        </ul>
    </li>
    <li class="sub"><a>coleções</a>
        <ul>
            <li><a href="pg/venda.html">à venda</a></li>
        </ul>
    </li>
    <li class="sub"><a href="pg/contato.html">contato</a></li>
</ul>
<div class="pad2"></div>

</html>

And the CSS:

.pad1 {width:50px; height:20px; background:#000; display:inline; float:right; margin:3px 3px 0 3px;}
.pad2 {width:50px; height:20px; background:#000; display:inline; float:right; margin:3px 3px 0 0;}

#menu {list-style-type:none; padding:0; margin:0; float:right;}
#menu ul {list-style-type:none; padding:0; margin:0;}
#menu li {float:left; background:#000; margin:3px 3px 0 0; position:relative;}
#menu li.sub {background:#000;}

/* for IE5.5 and IE6 only */
#menu table {border-collapse:collapse;position:absolute;top:0;left:0;z-index:80;font-size:1em;}

#menu li a {display:block; color:#ee0; height:25px; font-family: 'Maven Pro', sans-serif;, cursive; font-size:18px; line-height:24px; width:140px; text-decoration:none; text-align:center;}
#menu :hover,
#menu :focus, {color:#ee0; background:#000;}
#menu :hover > a,
#menu :focus > a {color:#ee0; background:#000;}

#menu ul, 
#menu :hover ul ul,
#menu :focus ul ul,
#menu :hover ul :hover ul ul,
#menu :focus ul :focus ul ul,
#menu :hover ul :hover ul ul.left,
#menu :focus ul :focus ul ul.left {position:absolute; left:-9999px; width:140px;}

#menu :hover ul,
#menu :focus ul{left:0;top:25px; background:url(transparent.gif);} /* the background image is for IE7 */

#menu :hover ul :hover ul,
#menu :focus ul :focus ul,
#menu :hover ul :hover ul :hover ul,
#menu :focus ul :focus ul :focus ul {padding:0 3px; left:125px; top:-3px;}

#menu :hover ul :hover ul.left,
#menu :focus ul :focus ul.left,
#menu :hover ul :hover ul :hover ul.left,
#menu :focus ul focus ul :focus ul.left {padding:0 3px; left:-131px; top:-3px;}
jquery ios menu

  • But this problem is happening in Safari?

  • Yes. I tested for Safari. I will test for another browser.

  • Could you give some link? I couldn’t find this plugin.

  • The link to www.curau.com.br

  • Already tried to join :focus to CSS also?

  • I have tried :Focus and also tried :active @Sergio.

  • But hoverdrop has nothing with jQuery! The only script that comes with it is to fix an error with Internet Explorer. What this does is organize a menu using the pseudo-selector :hover. I couldn’t choose another menu of these examples? This type is not optimized for cell phones.

  • But the question is why does it open on any phone other than Iphone? @Gustavorodrigues But anyway I will try to choose another and test.

    1. This type is not optimized for cell phones; 2. It uses the pseudoselector :hover; Conclusion: the other cell phones are simulating the action of :hover while iPhone is not.
Show 4 more comments

1 answer

1

You have an idea to do this here: HOVER DROP ?

I tested it here on Safari, Chrome and Firefox. It worked.

Try to add this code:

$(function () {
  $(".sub").on('hover click', function () {
    $(this).find('ul').css('left', '0px')
  });
});

EXAMPLE

  • I tested for Chrome on iphone and it doesn’t work either. The site is www.curau.com.br.

  • tested the one I sent?

  • The one you sent doesn’t have "submenu". Mine is like this: <ul id="menu"> <li><a href="index.html">home</a></li> <li class="sub"><a>curau</a> <ul> <li><a href="pg/quemsomos.html">who we are</a></li> <li><a href="pg/clipping.html">clipping</a></li> </ul> </li></ul <</ul <class="pad2"></div>

  • @Line, edit your question and put the HTML and javascript code you have. Get better understood.

  • 1

    http://jsfiddle.net/4jxph/2981/ - Whoever uses touch will tap the menu, the browser will simulate a click and it will open. For those who use mouse does not change anything.

  • That’s right @Gustavorodrigues, has this detail too.

  • Placed click in the example because it kind of generalizes touchstart and MSPointerDown at the same time but gets 300ms slower in some browsers. Only adapt the code using these two events to gain that time back.

Show 2 more comments

Browser other questions tagged jquery ios menu

You are not signed in. Login or sign up in order to post.