CSS: Menue per Klick auf ein image aufklappen

[Linuchs]

Moin,

ich wende Klappmenüs an, die per CSS :hover ausklappen.

Doch wie funktioniert das per CSS, wenn das Menu per Klick ausfahren soll?

Struktur:

<div id="navigation" style="border: .1pt dotted #ccc;">
  <img class="ic cur_pointer" src="/img/icon_menu.png" alt="Menu" title="Menu" />
  <div>
    <p>Kapitel A</p>
    <p>Kapitel B</p>
    <p>Kapitel C</p>
  </div>
</div>

CSS:

div#navigation {
  display: inline-block;
  positon: relative;
}
div#navigation div {
  display: inline-block;
  visibility: hidden;
  position: absolute;
  top: 5em;
  right: 5px;
}
div#navigation:hover div {
  visibility: visible;
}

Linuchs

[Matthias Apsel]

Hallo Linuchs,

Doch wie funktioniert das per CSS, wenn das Menu per Klick ausfahren soll?

Das ist mit CSS allein nicht möglich. Du kannst dich gern unter https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation umschauen.

Bis demnächst
Matthias

[JürgenB]

Hallo,

Doch wie funktioniert das per CSS, wenn das Menu per Klick ausfahren soll?

Das ist mit CSS allein nicht möglich. Du kannst dich gern unter https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation umschauen.

und wenn es nur um das Auf- und Zuklappen geht, reicht schon details/summary. Javascript wird wegen der absoluten Positionierung für IEs und MS-Edge benötigt, und für ein wenig Komfort.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

IE unterstützt kein summary/details. Wer den noch unterstützen will, braucht den Polyfill.

Wo ist der eigentlich? Die Wiki-Seite schreibt:

Im realen Einsatz sollte der Polyfill in eine eigene Datei ausgelagert und nur bei Bedarf geladen werden.

Der reale Einsatz ist im Wiki-Artikel umgesetzt, weil eine eigene Datei inkludiert wird, aber wo die eigene Datei ist, müsste man ggf. verlinksen 😉

Rolf

[JürgenB]

Hallo Rolf,

im Tutorial-Beispiel ist der Polyfill eingebaut ( // details-polyfill.js bis // Ende details-polyfill.js ). Externe Scripte werden im Frickl nicht angezeigt. Der Code zum Nachladen des Polyfill ist auskommentiert.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Das ist mit CSS allein nicht möglich. Du kannst dich gern unter https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation umschauen.

und wenn es nur um das Auf- und Zuklappen geht, reicht schon details/summary.

Nö. Das hat bei Tastaturbedienung zwei Fehler:

• Das Menü schließt nicht bei [Esc].
• Man bleibt nach dem letzen Menüpunkt nicht im Menü (focus trap) und gelangt zum ersten Menüpunkt, sondern springt raus

Javascript wird wegen der absoluten Positionierung für IEs und MS-Edge benötigt, und für ein wenig Komfort.

Auch um die o.g. Fehler zu beheben, bedarf es JavaScript.

Wenn denn details/summary überhaupt geeignet ist.

Das sollte schon mal in die richtige Richtung gehen: off-canvas menu, with focus trap

[JürgenB]

Hallo Gunnar,

Das ist mit CSS allein nicht möglich. Du kannst dich gern unter https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation umschauen.

und wenn es nur um das Auf- und Zuklappen geht, reicht schon details/summary.

Nö. Das hat bei Tastaturbedienung zwei Fehler:

• Das Menü schließt nicht bei [Esc].

das würde ich nicht als Fehler ansehen. Man kann das Menü bedienen. Für mich eher ein Komfortmerkmal. Ist aber im Tutorial drin.

• Man bleibt nach dem letzen Menüpunkt nicht im Menü (focus trap) und gelangt zum ersten Menüpunkt, sondern springt raus

Das sehe ich auch nicht als Fehler an, da die Bedienung möglich ist. Ich habe mich im Tutorial bewusst dagegen entschieden. Ich möchte das Menü mit Tab auf den letzten Punkt verlassen. So kenne ich es.

Javascript wird wegen der absoluten Positionierung für IEs und MS-Edge benötigt, und für ein wenig Komfort.

Auch um die o.g. Fehler zu beheben, bedarf es JavaScript.

Wenn denn details/summary überhaupt geeignet ist.

Warum nicht? Warum soll es besser sein, einen Button mit role- und Aria-Attributen umzumodeln. details/summary wurde dafür gemacht, etwas auf und zu zu klappen.

Das sollte schon mal in die richtige Richtung gehen: off-canvas menu, with focus trap

Funktioniert im MacOS-Safari nicht. Bei Klick auf Menü wird nur das Hamburger-Icon durch ein „X“ ersetzt, das Menü klappt aber nicht auf. Dafür kann der Text nicht mehr gescrollt werden.

Gruß
Jürgen

[Gunnar Bittersmann]

@@JürgenB

Das sollte schon mal in die richtige Richtung gehen: off-canvas menu, with focus trap

Funktioniert im MacOS-Safari nicht. Bei Klick auf Menü wird nur das Hamburger-Icon durch ein „X“ ersetzt, das Menü klappt aber nicht auf. Dafür kann der Text nicht mehr gescrollt werden.

Meh. Hat jemand eine Idee, was der Safari da nicht auf die Reihe kriegt? Das Menü wird an der richtigen Stelle positioniert, ist aber nicht zu sehen:

Ich hatte schon befürchtet, dass das Menü bei meinem akteullen Projekt im Safari auch nicht funktioniert. Dem ist glücklicherweise nicht so (warum auch immer).

😷 LLAP

[Rolf B]

Hallo Gunnar,

habe keinen Safari. Ich befahre nur Asphalt, sonst wird mein Chrome staubig 😉

Es sieht wie ein Reihenfolgefehler in den stacking contexts aus. Wobei das merkwürdig ist, das würde ja bedeuten dass der Safari diese Kontexte nach anderen Regeln anlegt oder darstellst als andere Browser.

Dein header ist sticky, das erzeugt einen eigenen Kontext. main erzeugt keinen, so weit ich das sehe, es sollte also zum Basis-Kontext gehören und header sollte drüber liegen.

Aber probier mal aus, dem header z-index:1 zu geben.

Rolf

[Gunnar Bittersmann]

@@Rolf B

habe keinen Safari. Ich befahre nur Asphalt, sonst wird mein Chrome staubig 😉

Schön in der Straßenmitte fahren, am Edge lauert der Firefox.

Aber probier mal aus, dem header z-index:1 zu geben.

Hilft auch nicht.

😷 LLAP

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Funktioniert im MacOS-Safari nicht. Bei Klick auf Menü wird nur das Hamburger-Icon durch ein „X“ ersetzt, das Menü klappt aber nicht auf. Dafür kann der Text nicht mehr gescrollt werden.

Das soll ja gerade bei geöffnetem Menü verhindert werden:
:root.noscroll { overflow: hidden } (Zeilen 10–12).

Es wird noch verrückter: Wenn ich das rausnehme, kann man auch bei geöffnetem Menü die Seite scrollen – aber nur, wenn sich der Cursor rechts vom Bereich befindet, wo das Menü wohl zwar ist, aber nicht zu sehen ist. So jedenfalls unter macOS.

Unter iOS scrollt die Seite auch, wenn der Finger links (d.h. über dem Menü-Bereich) ist.

😷 LLAP

[peter]

Natürlich geht das inzwischen mit HTML und CSS. Ich mache sogar recht viel mit dieser Technik.

Und zwar wird der Status z.B. eingeklappt/ausgeklappt in einer checkbox gespeichert. Und mit CSS gibt man die Regeln an, die bei :checked gelten sollen.

<input id="klapper" type="checkbox"/>
<label for="klapper" id="klapplabel">Klappe!</label>
<div>unwichtiges Zeug</div>
<div id="ausgeklappt">ausgeklapptes Zeug</div>

#ausgeklappt {display:none;}
input#klapper:checked ~ #klapplabel {background-color:#0c0;}
input#klapper:checked ~ #ausgeklappt {display:block;}

[Hacker]

Natürlich geht das inzwischen mit HTML und CSS. Ich mache sogar recht viel mit dieser Technik.

Und zwar wird der Status z.B. eingeklappt/ausgeklappt in einer checkbox gespeichert. Und mit CSS gibt man die Regeln an, die bei :checked gelten sollen.

Ah, der checkbox-Hack. Das kann man gut oder schlecht finden.

Viele Grüße

[JürgenB]

Hallo

Ah, der checkbox-Hack. Das kann man gut oder schlecht finden.

wohl eher schlecht.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

(@Matthias Scharwies)

dann sollte man diesen PoC wohl besser entsorgen statt zu verbessern?

Rolf

[Matthias Scharwies]

Servus!

Hallo JürgenB,

(@Matthias Scharwies)

dann sollte man diesen PoC wohl besser entsorgen statt zu verbessern?

PoC = People of color? - duckundwech!

Ist der Hinweis nicht deutlich genug? Sollte man ihn in Rot mit {{Achtung|...}} signalisieren?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Matthias,

nein. Ein Proof of Concept ist eine Technikdemonstration. Man zeigt damit, dass etwas geht, als Grundlage für ein Produkt.

Das sollte man mit dem Checkbox-Hack nicht tun. Er funktioniert zwar, aber nur für einen gewissen Wert von „funktioniert“. Man muss JavaScript drüberschütten, um mit aria-Attributen die Zugänglichkeit sicherzustellen. Und wenn man das schon tut, dann kann man auch andere JS-Techniken für Menüs verwenden, statt ein harmloses kleines HTML Element zweckzuentfremden.

Rolf

[Matthias Scharwies]

Servus!

Hallo Matthias,

nein. Ein Proof of Concept ist eine Technikdemonstration. Man zeigt damit, dass etwas geht, als Grundlage für ein Produkt.

Ah ok! Ich würde diesen Artikel trotzdem gerne behalten - die Warnung aber noch deutlicher formulieren.

Das sollte man mit dem Checkbox-Hack nicht tun. Er funktioniert zwar, aber nur für einen gewissen Wert von „funktioniert“. Man muss JavaScript drüberschütten, um mit aria-Attributen die Zugänglichkeit sicherzustellen. Und wenn man das schon tut, dann kann man auch andere JS-Techniken für Menüs verwenden, statt ein harmloses kleines HTML Element zweckzuentfremden.

Rolf

Herzliche Grüße

Matthias Scharwies

[peter]

Hallo Rolf,

Man muss JavaScript drüberschütten, um mit aria-Attributen die Zugänglichkeit sicherzustellen.

Könntest du das bitte erläutern bzw. Artikel diesbezüglich verlinken?

[Gunnar Bittersmann]

@@peter

Man muss JavaScript drüberschütten, um mit aria-Attributen die Zugänglichkeit sicherzustellen.

Könntest du das bitte erläutern

Eine Checkbox ist ein Eingabe-Element für boolesche Daten (ja/nein) (und wird als solches von assistiver Technologie angezeigt/angesagt/…).

Öffnen/Schließen eines Menüs ist keine Eingabe eines Ja-/Nein-Wertes; die Rolle „Checkbox“ dafür also falsch.

Das ließe sich mit ARIA beheben:

<input type="checkbox" role="button" aria-haspopup="true"/>

Damit wird der Button aber immer noch nicht richtig angesagt.

bzw. Artikel diesbezüglich verlinken?

Heydon Pickering geht im Kapitel „Menus & Menu Buttons“ im Abschnitt „The Checkbox Hack“ (S. 94–97) im Buch Inclusive Components ausführlicher darauf ein.

Auch etwas in Toggle Buttons.

😷 LLAP

[Linuchs]

Hallo peter,

danke für den Tipp. Funktioniert. Habe die Checkbox mit display:none versteckt und zeige an der Stelle das Menü-Icon. Zum Zuklappen zusätzlich ein Kreuz im Menü-Container:

<style>
#menue {
  position: absolute;
  white-space: nowrap;
  background: rgba(255,255,255,.9);
  border: .1pt solid #ccc;
  padding: 5px;
  top: 1.5em;
  right: 5px;
  z-index: 99;
  display:none;
}
input#menue_schalter {display:none;}
input#menue_schalter:checked ~ #menue {display:block;}
</style>
<input type=checkbox id=menue_schalter />
<label for="menue_schalter"><img class="ic_gr cur_pointer" src="/img/icon_menu.png" alt="Menu" title="Menu" /></label>
<div id=menue class=em12>
  <p class=ro><label for="menue_schalter"><img class="cur_pointer ic_gr" src="img/icon_kreuz.png" alt="X" /></label></p>
  <p>###Interessante Seiten###Interesting pages###Interessante pagina's###:</p>
  <p><a href="/?zp=p509&amp;lg=[lg]"  title="p509">###Europakarte der Events###European map of events###Europese kaart van de gebeurtenissen###</a></p>
  <p><a href="/?zp=p581a&amp;lg=[lg]" title="p581a">###Liste remso-Mitglieder###List of remso members###Lijst van remso-leden###</a></p>
  <p><a href="/?zp=p153&amp;lg=[lg]"  title="p153">###Städte-Liste###List of cities###Lijst van steden###</a></p>
  <p><a href="/?zp=p161&amp;lg=[lg]"  title="p161">###Fernradwege###Long-distance cycle routes###Lange-afstand fietsroutes###</a></p>
  <p><a href="/?zp=p114&amp;lg=[lg]"  title="p114">###Abo: Wohin am Wochenende?###Subscription: Where to go at the weekend###Sub: Waar naartoe in het weekend###</a></p>
</div>

Gruß, Linuchs

[JürgenB]

Hallo Linuchs,

leider hast du von den Vorschlägen nicht den besten, eher schon den schlechtesten genommen, oder um es mit Gunnars Worten zu sagen: Das Menü ist kaputt.

Gruß
Jürgen

[Martl]

Hallo Linuchs,

und wenn es nur um das Auf- und Zuklappen geht...

ersetze das img z. B. durch ein input type=image und ergänze

div#navigation:hover div,
div#navigation:focus-within div {
  visibility: visible;
}

Grüße, Martl

[Rolf B]

Hallo Martl,

focus-within ist ebenfalls nicht im IE unterstützt.

Rolf

[Linuchs]

Hallo Martl,

das funktioniert, danke.

@Rolf: focus-within ist ebenfalls nicht im IE unterstützt.

Naja, wenn IE dies und jenes nicht unterstützt, warum sollte ich dann den IE unterstützen?

Gelten Leute mit IE eigentlich auch als behindert wg. Barrierefreiheit?

(in dem Zusammenhang klingt IE wie eine Krankheit)

[Rolf B]

Hallo Linuchs,

(in dem Zusammenhang klingt IE wie eine Krankheit)

der IE ist wie Kinderlähmung: Wenn Du ihn erstmal hast, wirst Du ihn nicht mehr los. Und kommst nicht mehr recht vom Fleck.

Du musst den IE nicht unterstützen, in dem Sinne, dass deine Seite darauf optimal funktioniert.

Aber es darf auch nicht sein, dass sie mit dem IE überhaupt nicht benutzt werden kann, weil Menüs nicht aufgehen.

Rolf

[Linuchs]

Hallo Rolf,

Aber es darf auch nicht sein, dass sie mit dem IE überhaupt nicht benutzt werden kann, weil Menüs nicht aufgehen.

Na, da wird sich beim IE doch sicher ein CSS-Eintrag finden lassen ähnlich visibility:hidden, der auch nicht funktioniert. Und schon bleibt das Menü offen.

Du bist doch auch lange genug dabei. Hast du immer noch Lust, für die IE-Kapriolen Überstunden einzulegen? Und dann noch diese Weichen für diverse Versionen ...

Linuchs

[JürgenB]

Hallo Linuchs,

dir wurde eine Lösung gezeigt, die den IE nicht aussperrt.

Gruß
Jürgen

[Rolf B]

Hallo Linuchs,

zum Einen würde ich mir maximal für den IE11 Mühe geben. Den IE10 oder gar 9 muss keiner mehr nutzen. Alle von MS noch unterstützten Betriebssysteme können den IE11 laufen lassen, und ein paar nicht mehr unterstützte auch. Ein altes Windows 7 Phone, das nur den IE9 kennt, hat Pech. Seit sechs Jahre lang schon.

Zum Anderen geht es nicht um Kapriolen, sondern darum, dass die Seite nicht nur auf den Evergreenbrowsern grundsätzlich nutzbar ist. Wenn ein Menü einfach nicht aufzukriegen ist, kann das nicht akzeptiert werden.

Eine Kapriole ist da schon eher die JavaScript-Lösung, die im IE details/summary nachbildet und die Jürgen in seinem Wiki-Beitrag zur Dropdown-Navigation verwendet. Das ist schon richtig Arbeit.

Ein Menü, das im IE einfach immer offen ist, wäre aber auch eine Option. Niemand verlangt, dass die Seite im IE genauso schön aussieht und genauso elegant funktioniert wie im neuesten Fuchs, Safari oder Chrome. Dafür mache ich keine Überstunden. Die mache ich nur hier im Forum 😉

Rolf

[JürgenB]

Hallo Rolf,

viele Menüs legen sich mit absoluter Positionierung über den Inhalt, daher ist „immer offen“ auch keine Lösung. Ich habe leider keine Möglichkeit gefunden, die Unterstützung von Details/Summary per CSS abzufragen.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

nein, aber mit JS. Und mit JS kannst Du doch die Überlappung ausschalten.

Bzw. einschalten und per Default auslassen. Damit alles sichtbar bleibt, falls JS aus ist.

Wir hatten ja neulich einen interessierten Anwender für das details/summary Dropdown. Ohne Überlappung funktioniert es durchaus. Nur schiebt sich der ganze Inhalt nach unten, wenn man aufklappt. So what. Mit JS passiert es nicht mehr.

Der Basiszustand (IE11 ohne JS) ist: Alles sichtbar, kein Overlap
Ein PE Zustand für IE+JS könnte dein Menü mit details/summary Polyfill sein
Ein PE Zustand für Evergreenbrowser ohne JS wäre: Details klappt auf, überlappt aber nicht.
PE+JS für Evergreen ist dann der Wunschzustand.

Rolf

[JürgenB]

Hallo Rolf,

gib es zu, du hast das Tutorial gelesen. 😉

Ich hatte beim Tutorial die Optionen, IE und MS-Edge ohne JS nicht zu unterstützen, oder bei allen ohne JS mit dem Menü die Seite nach unten zu schieben. Mit einem CSS-Test hätte das Menü in allen Browsern funktioniert und nur bei IE und MS-Edge ohne JS wäre das Menü immer offen gewesen und die Seite nach unten geschoben. Absolute Positionierung des Menüs gibt es nur, wenn Details/Summary unterstützt wird.

Gruß
Jürgen