Submenü mit 'focus' aufklappen?

    Hallo zusammen,

    zur Zeit bastle ich an einem barrierefreien Wordpress-Theme rum, und bin gerade beim "Menü".

    Dieses besteht aus einem sichtbaren Level1 (waagrecht, 5 Listenpunkte), und jeweils einem Submenü (Level2; ul li ul li). Das Submenü ist unsichtbar, und wird erst beim Hovern des Level1-Menpunktes nach unten aufgeklappt. Funktioniert wunderbar, ABER...

    ... nicht mit der Tastaturbedienung!
    Das Submenü (Level2) klappt nicht auf, wenn ich zu einem Level1-Listenpunkt komme.

    Hab schon gegoogelt (und auch hier die Suche verwendet), aber es lässt sich diesbezüglich nichts finden. Es gäbe zwar Lösungen mit JavaScript und C++, was ich aber nicht verwenden möchte.

    Nun meine Frage:
    Weiß jemand, ob es alleinig mittels CSS ("focus"; ohne hovern) möglich ist, ein aufklappbares Submenü aufzuklappen?

    Gruß,
    Heinz

    • Gerade eben
    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

    Hallo pixselig,
    ja, habe ":focus" schon verwendet - sogar viel :)

    Aber ein Menü (w.o. beschrieben) kriege ich nicht hin :cry:
    Beispiel: http://www.script-tutorials.com/demos/272/index.html
    Sowas geht locker - obwohl da z.B. kein :hover drin ist ;-)

    Mir geht es um Folgendes: Wenn man bei obigem Menü einen Menüpunkt mit der Maus hovert, klappt das Untermenü nach unten auf.
    Genau DAS will ich auch mit ":focus" erreichen, sodass man die Untermenüpunkte per Tastatur ansteuern kann.

    Also wenn ich mit der Tab-Taste auf z.B. "Menu 2" gelange (=fokusiert!), dann soll das Untermenü nach unten aufklappen, und aufgeklappt bleiben, bis ich mich durch diese 8 Untermenüpunkte mit der Tab-Taste durchge':focus't habe ;-)

    Ich krieg's aber leider nicht hin in der CSS.

    Gruß,
    Heinz

    Hallo Gsi
    Dein Beispiel ist leider schlecht, da es mit js umgesetzt ist ;)
    Da mich das Thema jetzt auch interessiert hat habe ich es auf meiner Testseite selber mal probiert. Und siehe da, das Submenü erscheint nicht beim focus auf einen Parent-Punkt. Genau wie bei dir :)
    Da mich das jetzt aber nicht los gelassen hat habe ich kurz recherchiert und siehe da, anscheinend eine Lösung gefunden:

    Das Problem dürfte sein, dass du das Submenü (bzw. ul li ul li) mittels "display:none;" ausgblendet hast. Und scheinbar kann man das bei einem Focus auf einen Parent-Punkt nicht mittels "display: (inline-)block;" anzeigen lassen. -> ganz im Gegensatz zu einem Hover.

    Eine möglich lösung ist aber, dass du das Submenü nicht ausblendest sondern es einfach ausserhalb des Bildschirmes positionierst und bei einem Hover UND Focus einfach die Positionsangabe veränderst. Dann sollte es erstens bei einem Focus erscheinen und zweitens nach dem Focus auf den Parent-Punkt erst die Sub-Punkte durchgegangen werden.

    Näheres hierzu -> http://www.bitvtest.de/infothek/artik…lappmenues.html (besonders ab dem Punkt "Tastaturbedienung")

    Ich habe den Lösungsweg jetzt nicht versuchsweise umgesetzt, aber der Artikel klingt plausiebel (auch wenn schon 2009 geschrieben - hat aber auf css in diesem Fall ja keinen einfluss).

    Lass mich aber bitte wissen ob es funktioniert hat!

    LG, pixselig

    Hallo pixselig,
    vielen Dank für deine Antwort und v.a. dein Interesse für die Thematik :)

    Ich arbeite gerade an einem "tatsächlich" barrierefreien WP-Theme, kenne auch den BITVtest sehr gut, weshalb ich dieses Thema angeschnitten habe ... gerade bei WP. Es scheint mir entweder mit der WP-Software zusammen zu hängen, oder mit Einstellungen des Webspace-Servers, oder, oder, oder ...

    Ich habe ein Skript entwickelt, welches auf einem anderen Server wie gewünscht funktioniert, aber in Verbindung mit WP nicht.

    "display: none;" ist bez. Barrierefreiheit eh verpönt, weshalb ich schon lange z.B. Sprunglinks aus dem Sichtbereicht mit "position: absolute; top: - 9999px;" oder "margin-left: -9999px;" rausschiebe, was ich mit ":focus" eben wieder reinholen kann: "top: 9999px" oder "margin-left: auto".

    Aber sowas hatte ich noch nie mit Teilen einer Navi umgesetzt, z.B. Untermenü.
    Seit gestern sitze ich nun da dran *grummel* ... auf der einen Seite funktioniert's - mit WP geht's aber nicht. Nun weiß ich nicht, ob's am Server liegt, oder ob sich da was mit WP beißt ... ich teste noch rum!

    Aber ich denke, morgen werde ich das Problem gelöst haben ;-)
    Dachte nur, dass hier jemand schon Erfahrung bez. WP damit hat, woran es liegen könnte.
    ;-)

    Gruß,
    Heinz

    Hallo Heinz
    Hau jetzt nur bitte nicht das submenü mit "top: 9999px;" beim Focus nach unten aus der Seite raus ;)
    Allgemein kann ich mir nicht vorstellen, dass es an WP oder am Server liegt. Begründung: Ausgeliefert wird vom Server reines HTML zusätzlich CSS und eventuell JS. Der CSS-Code ist dabei gänzlich unverändert und der HTML-Code wird am Server aus den WP-PHP-Dateien interpretiert. Was am Client ankommt ist ja leicht zu überprüfen und wenn dann der Quellcode und die CSS stimmen, wird es auch funktionieren.
    Natürlich hat WP einen Einfluss auf die Klassenvergabe bei Menüs (man kann das auch selber beeinflussen) aber wenn man die CSS darauf abstimmt passts ja eh wieder.
    Lass mich wissen wies ausging - sonst muss ichs selber probieren :(
    LG, pixselig

    Hallo pixselig,

    doch, muss so sein.
    Denn bei einem Server funzt das Skript ja, beim anderen mit WP nicht!

    Mein Skript habe ich vom funktionierenden Server dann 1:1 übertragen ... und mit WP funzt es nicht - aber ich weiß noch nicht was daran schuld ist.

    Habe schon viel rumprobiert ... alle Klassen und IDs überpüft, doctype-Angaben ausprobiert, Positionierung des Codes innerhalb der CSS bzw. dem Quellcode, die CSS-Angaben selbst auf alle möglichen Arten ausgetauscht, uvm. ...

    Morgen gehe ich dann mal dran, mir den WP-Quellcode zuerst mal Block für Block anzusehen und auszutesten, wo es hapert könnte, und dann eben halt mal Zeile für Zeile *grummel*

    Gruß,
    Heinz

    pixselig
    Link?
    Teste es dzt. auf meinem eigenen Web-Testserver sowie dem Webserver zweier Bekannten - die URIs geb ich deshalb nicht gerne her. Aber ich kann morgen eine URI einrichten, wo man das funktionierende Skript mal testen kann ... und auch kopieren zum selber testen ;-)
    Aber heute ist schon spät - bis morgen und Gute Nacht ;-)

    Gruß,
    Heinz

    Hallo,
    so - nun bin ich wieder da ;-)

    Hier mal ein Link mit meinem Menü ... und so wär's richtig (mit Tab-Taste weiter, und das Submenü öffnet sich):
    http://html-css.tipido.net/13101701/

    Da funktioniert's, aber wenn ich das Menü in WP einbinde, zerschießt es mir das Layout.
    :cry:
    Hab schon rumgesucht, aber noch nichts gefunden.

    Gruß,
    Gsi

    Hallo Heinz

    Schön, dass du das Beispiel hoch geladen hast. Noch schöner zu sehen, dass es funktioniert ;)
    Ich habe allerdings etwas länger gebraucht um zu verstehen, wie das bei dir in diesem Fall funktioniert.
    Ich gleube auch zu wissen, warumm es dir das Layout zerschiesst (dürfte mit der margin-top: 9999px zusammenhängen).
    Das ganze was du da gemacht hast ist aber wesentlich einfacher umzusätzen -> mir fehlt nur gerade die Zeit dazu. Wenn du denn Code online lässt schaue ich mir das am Abend nochmals an und poste dir meine Variante.
    LG, pixselig

    Hallo pixselig,
    ja, ich lass den Code mal online ... würde mich ja sehr freuen, wenn es einfacher umzusetzen ginge ;-)

    Gruß,
    Heinz

    So! Nun hab ich die Krux gefunden *g*
    Nachdem ich WP Block für Block auseinander genommen habe, und dann die CSS, bin ich endlich auf den Fehler gestoßen. In der CSS hatte ich davor noch andere Link-Angaben (a:link, a:visited, a:focus, a:hover, a:active) mit einem 1px-Rahmen, welcher mir das Layout zerschossen hat :? ... nur ein einziger Pixel!
    Aber nun passt's!

    pixselig
    Auf deine Lösung wäre ich trotzdem gespannt, da mir die meinige etwas fragil erscheint. Würde mich freuen, etwas stabileres zu bekommen ;-)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden