Erweiterung von Toggle Menü ohne JavaScript für mobile Navigation

  • Mir hat die Nav von hier http://www.html-seminar.de/toggle-menue-ohne-javascript.htm gefallen
    und hab mich (gezwungen weil ja nicht so mit css befreundet) da mal rangesetzt,
    um das Menü auch mit Untermenüs zum laufen zu bekommen.


    Demo: http://www.cottton.net/
    oder https://jsfiddle.net/pschqazd/ (wobei dort die "result"-watermark über dem Menu-Button nervt :) )


    Da sich ja nun aber die Untermenüs per :hover öffnen, wird das aufm Mobile nicht so gut kommen.
    Wie/Wo könnte man denn hier ansetzen, um (auch wieder ohne JS) die Untermenüs per Button zu öffnen?


    Ideen/Vorschläge/Änderungen/... immer gern.


    Code:
    index.html


    header.css


    style.css

  • Hallo,


    bevor du unnötig Steine ins Rollen bringst: Hast du das überhaupt mal mobil ausprobiert?


    Zitat

    per :hover öffnen


    Laut Anleitung mittels :target. Das sollte demnach auch mobil problemlos funktionieren.


    Gruss


    MrMurphy

  • Okay, ich zeig es dir .. :D


    Also, der CSS selector '+' selektiert das nachfolgende element, dadurch lässt sich ein 'IF' simulieren

    HTML
    1. <div class="a">A</div>
    2. <div class="b">B</div>
    3. <div class="b">B</div>
    CSS
    1. /* Wenn ein Element mit der klasse .b direkt hinter einem Elem. mit der Klasse .a ist ... */
    2. .a + .b {
    3. color: red;
    4. }

    ->Das erste B-DIV wird rot
    Dann wenden wir einen Trick an..: Ein input[type="checkbox"] lässt sich in css via dem pseudoselector :checked auswerten
    Wenn der input gecheckt ist, spricht der Selektor an:

    HTML
    1. <input type="checkbox">
    2. <input type="checkbox" checked>
    CSS
    1. /* wenn der input 'checked' ist .. verschwindet er */
    2. input:checked {
    3. display: none;
    4. }

    ->Der 2. input ist unsichtbar, wenn der 1. markiert wird, verschwindet er auch
    Jetzt testen wir einfach ob der Input gecheckt ist oder nicht, ensprechend zeigen wir das menü

    HTML
    1. <input id="menuToggle" type="checkbox">
    2. <div class="menu">Das Menü :0</div>
    CSS
    1. .menu{
    2. opacity: .2;
    3. }
    4. input#menuToggle:checked + .menu{
    5. opacity: 1;
    6. }


    Jetzt kannst du das Menü via der checkbox steuern.
    Da die checkbox eine ID hat kannst du ihr ein oder mehrere labels zuordnen, die die checkbox 'toggeln' und den input einfach verstecken.. :)


    Beispiel kommt gleich... :D:love:
    HIER: ^^
    http://codepen.io/wolf-w/pen/jbEdBW?editors=110

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von wolf ()