CSS Dynamische Navigation mit Hover - Wie Mache ich es im iOS Safari?

In meiner Website verwende ich ein CSS dynamisches Menü. Dies ist gut in desktop-Browsern, aber nicht auf iOS - (iphone, ipad, etc), da die touch-Oberfläche unterstützt nicht die :hover selector.

Meine Frage ist: was ist der beste Weg der Unterstützung dieser auf iOS? (Im Idealfall entweder durch patchen mit ein paar CSS-oder Javascript-Code enthält, wird der vorhandene code funktioniert, anstatt die ganze Sache immer nur um eine iOS-Version)

Mein html sieht so aus

<ul id="nav"> 
  <li> 
     Item 1
     <ul> 
       <li><a href=''>sub nav 1.1</a></li>
       <li><a href=''>sub nav 1.2</a></li>
     </ul> 
  </li> 
  <li> 
     Item 2
     <ul> 
       <li><a href=''>sub nav 2.1</a></li>
       <li><a href=''>sub nav 2.2</a></li>
     </ul> 
  </li> 
  <li> 
     Item 3 
     <ul> 
        <li><a href=''>sub nav 3.1</a></li>
        <li><a href=''>sub nav 3.2</a></li>
    </ul> 
  </li> 
</ul> ​​​​​

Und die CSS-Datei wird diese

#nav li {
    float:left;
    padding:0 15px;
}

#nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    margin-left: -10px;
}

#nav li:hover ul {
    left: auto;
}

Ich habe eine jsfiddle dieses hier: http://jsfiddle.net/NuTz4/

InformationsquelleAutor DanSingerman | 2010-08-17
  1. 9

    Lesen Sie diesen Artikel, vielleicht ist es eine Lösung für Sie 😉

    http://www.usabilitypost.com/2010/05/12/css-hover-controls-on-iphone/

    Auch JS-Lösung, entnommen aus: http://www.evotech.net/blog/2008/12/hover-pseudoclass-for-the-iphone/

    var nav = document.getElementById('nav');
var els= nav.getElementsByTagName('li');
for(var i = 0; i < els.length; i++){
    els[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
    els[i].addEventListener('touchend', function(){this.className = "";}, false);
}

    In jQuery:

    $('#nav li').bind('touchstart', function(){
    $(this).addClass('hover');
}).bind('touchend', function(){
    $(this).removeClass('hover');
});

    css:

    li:hover, li.hover { /* whatever your hover effect is */ }
    • Danke. Ich habe Ihre jQuery-Lösung-und es funktioniert sehr gut.
    • Ich habe Ihre jQuery-Lösung, aber ich gebunden toggleClass (), um touchstart, so dass jedes mal, wenn der Benutzer berührt das hover-element in der Lage zeigt. Berühren Sie erneut, um Sie zu verstecken. $("#nav li").bind("touchstart", function(){ $(this).toggleClass("hover"); });
    • Ich glaube, mit "auf" statt "touch..." erzielt das gleiche Ergebnis. Meine Lösung ist für die touch-Maus, aber deine Lösung ist das, was die meisten Menschen eigentlich wollen, wenn Sie benötigen, um die Interaktion mit der schwebte Element.
    • Wie würde das getan werden, ohne den Einsatz von jQuery? Das ist, wenn es möglich ist, ohne dass es.
    • Es gibt eigentlich nur 3 Lösungen hier, das erste ist vanilla javascript, 2. man ist jquery, 3. eine Reine css...
    InformationsquelleAutor BGerrissen
Schreibe einen Kommentar