1

Programei um site, e para o menu usei o jQuery hoverdrop. Mas ele não abre de forma alguma em iPhone ou iPad. Nos demais celulares e tablets funciona normalmente (apenas demora um pouco mais pra carregar dependendo da velocidade da internet). O que pode ser? E como posso resolver esse problema?

O código HTML que tenho é:

<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>

E o 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;}
9
  • Mas esta acontecendo esse problema no Safari? 10/02/2014 às 19:00
  • Sim. Testei pelo Safari. Vou testar por outro navegador.
    – Line
    10/02/2014 às 19:15
  • Poderia dar algum link? Não encontrei esse plugin. 10/02/2014 às 19:17
  • O link do site www.curau.com.br
    – Line
    10/02/2014 às 19:20
  • Já experimentou a juntar :focus ao CSS também?
    – Sergio
    10/02/2014 às 19:24

1 Resposta 1

1

Você está com idéia de fazer isso aqui: HOVER DROP ?

Testei aqui no Safari, Chrome e Firefox. Deu certo.


Tente adicionar esse código:

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

EXEMPLO

7
  • Testei pelo Chrome no Iphone e também não funciona. O site é www.curau.com.br.
    – Line
    10/02/2014 às 19:27
  • testou esse que mandei? 10/02/2014 às 19:27
  • Esse que você mandou não tem "submenu". O meu está assim: <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></ul> <div class="pad2"></div>
    – Line
    10/02/2014 às 19:35
  • @Line, edita sua pergunta e coloque o código HTML e javascript que você tem. Fica melhor de entender. 10/02/2014 às 19:39
  • 1
    jsfiddle.net/4jxph/2981 - Quem usar touch irá tocar no menu, o navegador irá simular um clique e ele irá abrir. Para quem usa mouse não muda nada. 10/02/2014 às 19:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .