Hover auf Touchgeräten als Ausklappeffekt?

[Zeppelin]

Hallo zusammen,

ich hätte eine Frage:

Ist ein Ausklappmenü, dass im CSS per a:hover realisiert wird auf mobilen Geräten, also Smartphone, Tablet usw. funktionsfähig?

Wäre für mich die am einfachsten zu realisierende Möglichkeit.

sieht im Code so aus:

<div class="navbutton">
                <a href="index.html">&#9776;</a><br><br><br>
                <a href="index.html">Home</a><br><br>
                <a href="aboutme.html">&Uuml;ber mich</a><br><br>
                <a href="erfolge.html">Erfolge</a><br><br>
                <a href="galerie.html">Galerie</a><br><br>
                <a href="engagement.html">Engagement</a><br><br>
                <a href="partner.html">Partner</a><br><br>
            </div>

Im CSS sind die beiden Variante so:

für die Desktopansicht:

.navbutton {
    visibility: hidden;
}

für die mobile Ansicht:

  .navbutton {
        visibility: visible;
        position: fixed;
        z-index: 10;
        top: 3vh;
        left: 3vw;
        font-size: 15px;
        text-align: center;
        width: 50px;
        height: 30px;
        border-radius: 0.3rem;
        text-decoration: none;
        background-color: #FDFDFD;
        transition: all .8s ease-in-out;
        transition-delay: .05s;
        padding-top: 10px;
        overflow: hidden;
    }

    .navbutton:hover {
        color: #FDFDFD;
        font-size: 20px;
        text-align: center;
        position: fixed;
        float: right;
        width: 170px;
        height: 380px;
        text-decoration: none;
        background-color: #4278b7;
    }

Das das Menüsymbol noch auf index verlinkt ist ein Fehler, aber das wäre auch noch so eine Frage: Lass ich da den Link einfach komplett raus und mach nur das Symbol rein oder einen leeren Link?

Schönen Dank für die Hilfe!

[Gunnar Bittersmann]

@@Zeppelin

ich hätte eine Frage:

Ist ein Ausklappmenü, dass im CSS per a:hover realisiert wird auf mobilen Geräten, also Smartphone, Tablet usw. funktionsfähig?

Ich hätte da noch eine andere Frage:

Ist ein Ausklappmenü, dass im CSS per a:hover realisiert wird, auf Desktop-Geräten funktionsfähig?

Die Antwort ist: nein. Nicht bei Tastaturbedienung. Also allgemein nicht.

LLAP 🖖

[Zeppelin]

Ehrlich gesagt versteh ich die Antwort nicht ganz.

Meinst du, falls sie schon bei reinem Tastaturbetrieb nicht laufen würde, kann sie auch als mobile Variante taugen, oder einfach dass sie im Tastaturbetrieb nicht funktioniert.

Denn letzteres muss sie ja auch nicht, da sie nur in der mobilen Ansicht eingeblendet wird.

Falls ersteres: Was ist dann eine Variante? hover durch active ersetzen?

Schöne Grüße

[Gunnar Bittersmann]

@@Zeppelin

Ehrlich gesagt versteh ich die Antwort nicht ganz.

Meinst du, falls sie schon bei reinem Tastaturbetrieb nicht laufen würde, kann sie auch als mobile Variante taugen, oder einfach dass sie im Tastaturbetrieb nicht funktioniert.

Denn letzteres muss sie ja auch nicht, da sie nur in der mobilen Ansicht eingeblendet wird.

Es gibt nicht so etwas wie „mobile Ansicht“. Es gibt schmale Viewports – auch auf dem Desktop.

Eine Webseite sollte muss funktionieren, egal ob die Nutzerin eine Maus schubst, auf der Tastatur klimpert, Touch gestikuliert oder Spracheingabe quasselt.

Falls ersteres: Was ist dann eine Variante? hover durch active ersetzen?

Antwort von Radio Jerewan: Im Prinzip ja. Nur nicht :active, sondern :focus; und nicht ersetzen, sondern hinzufügen, sodass beides geht.

LLAP 🖖

[Zeppelin]

Edit: was ich noch vergessen hatte:

im Mediequery für mobile Auflösung ist noch mit drin:

body { cursor: pointer; }

[Gunnar Bittersmann]

@@Zeppelin

Ist ein Ausklappmenü, …

Was genau meinst du mit „Ausklappmenü“?

Zuerst dachte ich ein mehrstufiges Pull-down-Menü, dein Code lässt aber auf eher auf eins schließen, dass sich hinter einem Hamburger-Icon versteckt? (Welcher hoffentlich auch mit „Menü“ beschriftet ist?)

Sowas wie dieses responsive Menü? (Fensterbreite schmaler ziehen)

Da hab ich noch einen Knoten im Taschentuch, das mal in einem Artikel ausführlicher zu erklären. Bis dahin: Ist das Tutorial genug?

LLAP 🖖

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Sowas wie dieses responsive Menü? (Fensterbreite schmaler ziehen)

Äh nei-en, nicht dieses, sondern jenes! Der Button gehört ins nav-Element, siehe Thread CSS-Kniffliges zum Wochenende.

Da hab ich noch einen Knoten im Taschentuch, das mal in einem Artikel ausführlicher zu erklären. Bis dahin: Ist das Tutorial genug?

Auch die Erkenntnisse aus jenem Thread sollten in den Artikel mit rein.

LLAP 🖖