CSS Navbar ok oder gehts übersichtlicher?

[JJ]

Hallo,

folgende Navabar macht das, was ich möchte. Sie ist horizontal mit horizentalem Submenü. (Quelle ist im Wesentlichen w3schools)

Aber ist sie auch wirklich gut umgesetzt, sie erscheint mir im Befüllen der Links etwas "kompliziert" strukturiert zu sein?

Geht das besser?
Ich würde mich über Vorschläge freuen, wie man diese Navbar verbessern (oder anders und besser) machen könnte.

JJ

[Matthias Scharwies]

Servus!

Hallo,

folgende Navabar macht das, was ich möchte. Sie ist horizontal mit horizentalem Submenü. (Quelle ist im Wesentlichen w3schools)

Aber ist sie auch wirklich gut umgesetzt, sie erscheint mir im Befüllen der Links etwas "kompliziert" strukturiert zu sein?

Na ja, w3fools

Geht das besser?
Ich würde mich über Vorschläge freuen, wie man diese Navbar verbessern (oder anders und besser) machen könnte.

Hier: HTML/Tutorials/Navigation/Grundstruktur

• aktuelle Seite kennzeichnen
• hover + focus sichtbar machen
• …

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@JJ

folgende Navabar macht das, was ich möchte. Sie ist horizontal mit horizentalem Submenü.

Was für ein Submenü? Davon ist bei Tasturbedienung nichts zu sehen.

Aber ist sie auch wirklich gut umgesetzt

Ganz und gar nicht.

🖖 Живіть довго і процвітайте

[JJ]

Hallo Gunnar,

folgende Navabar macht das, was ich möchte. Sie ist horizontal mit horizentalem Submenü.

Was für ein Submenü? Davon ist bei Tasturbedienung nichts zu sehen.

So weit hatte ich jetzt gar nicht gedacht.

Aber ist sie auch wirklich gut umgesetzt

Ganz und gar nicht.

Ich habs befürchtet.
Hast du vielleicht einen Link für mich, wo die Navbar genauso aussieht und besser umgesetzt ist?
Matthias hat mir schon einen Link auf Eure Doku geschickt, aber damit bekomme ich das selber nicht hin.

JJ

[Gunnar Bittersmann]

@@JJ

Hast du vielleicht einen Link für mich, wo die Navbar genauso aussieht und besser umgesetzt ist?

Besser umgesetzt: Menü

Genauso aussieht kriegst du mit Änderungen im CSS hin.

🖖 Живіть довго і процвітайте

[JJ]

Hi Gunnar,

Hast du vielleicht einen Link für mich, wo die Navbar genauso aussieht und besser umgesetzt ist?

Besser umgesetzt: Menü

Genauso aussieht kriegst du mit Änderungen im CSS hin.

Sieht komplett anders aus als das von mir vorgestellte.
Und auch nicht wirklich unkomplizierter.
Der HTML-Teil gefällt mir gut, aber der CSS-Teil verwirrt mich eher und ich verstehe ihn nicht. Den von mir vorgestellten verstehe ich (einigermaßen).

Trotzdem danke für deinen link.

JJ

[Gunnar Bittersmann]

@@JJ

Besser umgesetzt: Menü

Genauso aussieht kriegst du mit Änderungen im CSS hin.

Sieht komplett anders aus als das von mir vorgestellte.

Deshalb sagte ich ja, dass man das mit Änderungen im CSS so hinkriegt, wie du es dir vorgestellt hast.

Damit sich die Position des Untermenüs nicht auf den jeweiligen Hauptmenüpunkt bezieht, sondern auf das nav-Element (d.h. damit es ganz links steht), muss position: relative bei nav li { … } weg und in den nav { … }-Block rein.

Damit die Punkte im Untermenü nicht untereinander, sondern nebeneinander stehen, ist zu dessen Anzeige nicht display: block, sondern display: flex zu setzen.

Und damit das Untermenü über die volle Breite geht, ist bei nav ul ul { … } noch right: 0 zu ergänzen.

☞ Fertig.

der CSS-Teil verwirrt mich eher und ich verstehe ihn nicht.

Damit kann man nicht viel anfangen. Wenn du konkrete Fragen hat, kann man darauf eingehen. Auf ein pauschales „verstehe ihn nicht“ kann man nur mit Achselzucken antworten.

---

Bei den unteren Beispielen mit JavaScript fehlt übrigens noch was:

• Das Untermenü sollte sich beim Verlassen schließen
• Das Untermenü sollte sich per Esc-Taste schließen

(Die Liste erhebt keinen Anspruch auf Vollständigkeit.)

🖖 Живіть довго і процвітайте

[JJ]

Hallo Gunnar,

recht herzlichen Dank für Deinen neuen Link, mit dem kann ich schon viel mehr anfangen. Bin aber ehrlich, ich hätte das von vertikal auf horizontal nicht selber geschafft. Nun aber kann ich damit arbeiten. 👍

Damit sich die Position des Untermenüs nicht auf den jeweiligen Hauptmenüpunkt bezieht, sondern auf das nav-Element (d.h. damit es ganz links steht), muss position: relative bei nav li { … } weg und in den nav { … }-Block rein.

Damit die Punkte im Untermenü nicht untereinander, sondern nebeneinander stehen, ist zu dessen Anzeige nicht display: block, sondern display: flex zu setzen.

Und damit das Untermenü über die volle Breite geht, ist bei nav ul ul { … } noch right: 0 zu ergänzen.

☞ Fertig.

Klasse.
Habe sofort angefangen, es umzusetzen.
Ehrlich gesagt, gefällt mir persönlich Option 1 am besten.
Wäre klasse, wenn Du (natürlich auch gerne alle anderen) mal nen Blick auf meine Umsetzung werfen könntest.

der CSS-Teil verwirrt mich eher und ich verstehe ihn nicht.

Damit kann man nicht viel anfangen. Wenn du konkrete Fragen hat, kann man darauf eingehen. Auf ein pauschales „verstehe ihn nicht“ kann man nur mit Achselzucken antworten.

Da hast Du natürlich recht.
Gestern hatte ich so gar keinen Ansatz. Nachdem ich heute früh Matthias überarbeiteten Artikel gelesen und dann Dein neues Beispiel studiert habe, sieht das schon ganz anders aus. Und es ist mir auch gelungen, Dein Beispiel anzupassen, die für mich nicht wichtigen Elemente heraus zu nehmen und sogar Custom Property zu verwenden (aus dem Artikel gelernt).

Trotzdem bin ich nicht so ganz glücklich mit der Ergebnis, obwohl es in meinen Augen sehr schön aussieht. Ich versuch mal zu erklären, was mir da fehlt oder was ich einfach schön fände. Eigentlich sinds ein paar "nice to haves" und nur ein wirklicher Punkt, der mir die Verwendung des bisherigen Standes nicht möglich machen würde (Punkt2)

1. Nice to have: Fände ich schön, wenn die das rechte Ende der Subnavigation immer mit dem rechten Ende des "gehoverten" Link der Hauptnavigation endet, es sei (natürlich) denn, dass das rechte Ende der Subnavigation ohnehin über das rechte Ende des "gehoverten" Links der Hauptnavigation hinaus ragt.
   Ich hoffe, das ist verständlich. Falls nicht, wirf mal einen Hover-Blick auf "Contact" in meinem Beispiel. Dort wäre schöpn, wenn man nicht wieder ganz nach Links müsste, um einen der 3 Unterlinks zu klicken.

2. Must have: Was aber viel schlimmer ist: Wenn Du den Viewport sehr viel verschmalerst, so dass meine Links der Hauptnavigation auf 2 oder gar 3 Reihen untereinander wechseln, hast Du keine Chance mehr, die Subnavigation anzusteuern (jedenfalls mit Maus oder Touch). Denn wenn Du vom Hover-Link irgendwo anders hin gehst, als auf die Subnavigation, verschwindet diese sofort wieder. Da sich die Subnavigation aber dann in Reihe 3 oder 4 befindet, kannst Du nicht ohne Umweg (über die weiteren reihen der Hauptnavigation) dorthin gelangen. Hier wäre schöner, wenn die Subnavigation immer die (weiteren Reihen der) Hauptnavigation überblendet. Ich habe versucht, mit dem z-index zu spielen, habe das aber nicht hin bekommen.

3. Nice to have: Was schön wäre, weil in der Praxis oft nervend: Wenn man versehentlich die Hauptnavigation streift (passiert in meiner Anwendung oft), wäre cool, wenn die Subnavigation nicht sofort reagiert, sondern eine Verzögerung von z.b. einer Sekunde eingebaut wäre. Dann würde sie nicht jedesmal hinein "flattern", wenn mans gar nicht will.

4. Luxus wäre dann, wenn die Subnavigation etwas smooth hinein und hinaus fährt, aber das ist natürlich alles andere als nötig und auch fraglich, ob ohne JS hier möglich.

Nochmal danke für Deine Hilfe.

JJ

[Matthias Scharwies]

Servus!

1. Nice to have: Fände ich schön, wenn die das rechte Ende der Subnavigation immer mit dem rechten Ende des "gehoverten" Link der Hauptnavigation endet, es sei (natürlich) denn, dass das rechte Ende der Subnavigation ohnehin über das rechte Ende des "gehoverten" Links der Hauptnavigation hinaus ragt.

Das habe ich jetzt im Beispiel 7 geändert:

nav li {
  margin: 0.5em 0 0.5em 0.5em;
  padding: 0;
  font-size: 1.5rem;
  flex: 1 1 0%;
}

Der Rand ist überall 0.5em, aber nicht rechts.

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen!

@Gunnar Bittersmann

Du hast in deinem Beispiel visually-hidden verwendet.

visually-hidden,
.visually-hidden,
[visually-hidden="true"]
{
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	padding: 0 !important;
	border: 0 !important;
	height: 1px !important;
	width: 1px !important;
	overflow: hidden !important;
}

Habe jetzt ein bisschen nachgelesen (Inclusively Hidden Chris Coyier on Apr 19, 2019) und würde gerne auf .screenreader-only oder sowas verzichten.

Was hältst Du von:

<nav>
  <ul>
    <li><a href="#">Seite 2</a>
      <button aria-expanded="false" aria-label="Untermenü aufklappen">
        ▶
      </button>
      <ul>
        <li><a href="#">Seite 2a</a></li>
        <li><a href="#">Seite 2b</a></li>
      </ul>
    </li>

Sollte die ul ul eine id und der button ein aria-controls enthalten?

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen!

Was hältst Du von:

<nav>
  <ul>
    <li><a href="#">Seite 2</a>
      <button aria-expanded="false" aria-label="Untermenü aufklappen">
        ▶
      </button>
      <ul>
        <li><a href="#">Seite 2a</a></li>
        <li><a href="#">Seite 2b</a></li>
      </ul>
    </li>

Das Dreieck ist Quatsch, denn da würde ja BLACK RIGHT-POINTING POINTERvorgelsen werden!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

      <button aria-expanded="false" aria-label="Untermenü aufklappen">
        ▶
      </button>

Das Dreieck ist Quatsch, denn da würde ja BLACK RIGHT-POINTING POINTERvorgelsen werden!

Nö. aria-label (ebenso aria-labelledby) ersetzt ja die Beschriftung – anders als aria-description/aria-describedby, was die Beschriftung ergänzt.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

      <button aria-expanded="false" aria-label="Untermenü aufklappen">
        ▶
      </button>

Das Dreieck ist Quatsch, denn da würde ja BLACK RIGHT-POINTING POINTERvorgelsen werden!

Nö. aria-label (ebenso aria-labelledby) ersetzt ja die Beschriftung – anders als aria-description/aria-describedby, was die Beschriftung ergänzt.

Würdest du's dann so machen?

Andererseits ist ein SVG als Hintergrund einfach schöner als so ein komisches Dreieck! Deshalb wohl mit visually-hidden in irgendeiner Form.

Anstelle visually-hidden="true" tendiere ich eher zu class="visually-hidden", was ich auch irgendwie zu lang finde.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Anstelle visually-hidden="true" tendiere ich eher zu class="visually-hidden"

Ja, siehe anderes Posting.

was ich auch irgendwie zu lang finde.

Sprechende Namen sind nun mal länger als kryptische. Dafür halt sprechend.

sr-only (Bootstrap) lässt die Frage aufploppen: WTF ist sr?

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Matthias Scharwies

Du hast in deinem Beispiel visually-hidden verwendet. […]
[Ich] würde gerne auf .screenreader-only oder sowas verzichten.

Bei aria-label steht der Text in einem Attribut; bei <span class="visually-hidden"> (oder wie auch immer man die Klasse nennt) steht der Text in einem Element.

Das Hauptargument gegen ersteres ist IIRC, dass Attributwerte von automatischen Übersetzern nicht übersetzt werden. (Oder haben die inzwischen eine Liste von Attributen, deren Werte sie doch übersetzen sollen? alt fiele mir ein.)

Ansonsten sollten beide Varianten gleichwertig sein; zweite aber bevorzugt.

---

Sollte die ul ul eine id und der button ein aria-controls enthalten?

Ich hab da Heydon im Ohr, der sagt: braucht man nicht, wenn das gesteuerte Element unmittelbar nach dem Button folgt.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Du hast in deinem Beispiel visually-hidden verwendet. […]
[Ich] würde gerne auf .screenreader-only oder sowas verzichten.

Bei aria-label steht der Text in einem Attribut; bei <span class="visually-hidden"> (oder wie auch immer man die Klasse nennt) steht der Text in einem Element.

Das Hauptargument gegen ersteres ist IIRC, dass Attributwerte von automatischen Übersetzern nicht übersetzt werden. (Oder haben die inzwischen eine Liste von Attributen, deren Werte sie doch übersetzen sollen? alt fiele mir ein.)

Ansonsten sollten beide Varianten gleichwertig sein; zweite aber bevorzugt.

---

Sollte die ul ul eine id und der button ein aria-controls enthalten?

Ich hab da Heydon im Ohr, der sagt: braucht man nicht, wenn das gesteuerte Element unmittelbar nach dem Button folgt.

Danke!!

🖖 Живіть довго і процвітайте

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Bei aria-label steht der Text in einem Attribut; bei <span class="visually-hidden"> (oder wie auch immer man die Klasse nennt) steht der Text in einem Element.

Das Hauptargument gegen ersteres ist IIRC, dass Attributwerte von automatischen Übersetzern nicht übersetzt werden. (Oder haben die inzwischen eine Liste von Attributen, deren Werte sie doch übersetzen sollen? alt fiele mir ein.)

“Do not rely on it.” — Adrian Roselli, Tweet → Artikel (Update)

Ansonsten sollten beide Varianten gleichwertig sein; zweite aber bevorzugt.

Ja, weiterhin.

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Gunnar Bittersmann

Bei aria-label steht der Text in einem Attribut; bei <span class="visually-hidden"> (oder wie auch immer man die Klasse nennt) steht der Text in einem Element.

Das Hauptargument gegen ersteres ist IIRC, dass Attributwerte von automatischen Übersetzern nicht übersetzt werden. (Oder haben die inzwischen eine Liste von Attributen, deren Werte sie doch übersetzen sollen? alt fiele mir ein.)

“Do not rely on it.” — Adrian Roselli, Tweet → Artikel (Update)

Ansonsten sollten beide Varianten gleichwertig sein; zweite aber bevorzugt.

Ja, weiterhin.

Danke, als Referenz ins Tutorial eingefügt!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Du hast in deinem Beispiel visually-hidden verwendet.

Ah ja, jetzt sehe ich’s: ein Attribut, was es in HTML gar nicht gibt (aber vielleicht geben sollte?) – in Ahnlehnung an aria-hidden.

Um die Leser nicht zu verwirren, sollte in Tutorials sicher der Standard mit class="visually-hidden" verwendet werden.

🖖 Живіть довго і процвітайте

[JJ]

Hallo Gunnar,

☞ Fertig.

Auch für Deine ersten beiden Beispiele gilt, dass es unmöglich ist, bei einer Viewportbreite von 362px oder weniger mit der Maus auf "Hauptgerichte vegetarisch" oder auch "Hauptgerichte mit Fleisch" zu klicken.

Dieser Wert für die Viewportbreite von 362px erhöht sich natürlich entsprechend, je breiter die Hauptnavigation ansich ist, also je mehr Inhalt die Hauptnavigation enthält.

Gruß, JJ

[Matthias Scharwies]

Servus!

Hallo Gunnar,

☞ Fertig.

Auch für Deine ersten beiden Beispiele gilt, dass es unmöglich ist, bei einer Viewportbreite von 362px oder weniger mit der Maus auf "Hauptgerichte vegetarisch" oder auch "Hauptgerichte mit Fleisch" zu klicken.

Deswegen muss man immer eine media query einbauen , die von vertikal auf horizontal schaltet, wenn’s breit genug ist.

Besonderes Augenmerk sollte auf Übersichtlichkeit und kurze Linktexte gelegt werden. Manchmal geht‘s aber auch nicht anders!

Dieser Wert für die Viewportbreite von 362px erhöht sich natürlich entsprechend, je breiter die Hauptnavigation ansich ist, also je mehr Inhalt die Hauptnavigation enthält.

Gruß, JJ

Herzliche Grüße

Matthias Scharwies

[JJ]

Hallo Matthias,

Deswegen muss man immer eine media query einbauen , die von vertikal auf horizontal schaltet, wenn’s breit genug ist.

Ist eine Möglichkeit.
Die andere wäre, dass das aufgeklappte Menü einfach Zeile 2 oder 3 des Hauptmenüs überschreibt.

So etwas hatte ich mal in IE6-Zeiten. Das war eigentlich durchaus tauglich. Wenn Du hier den Viewport verkleinerst, kannst Du immer noch alle Submenüs ansteuern. Das sollte doch mit Gunnars Menü Nr.1 und Nr.2 auch gehen, oder unterschätze ich den Aufwand?

JJ

[Matthias Scharwies]

Servus!

Hallo Matthias,

Deswegen muss man immer eine media query einbauen , die von vertikal auf horizontal schaltet, wenn’s breit genug ist.

Ist eine Möglichkeit.
Die andere wäre, dass das aufgeklappte Menü einfach Zeile 2 oder 3 des Hauptmenüs überschreibt.

So etwas hatte ich mal in IE6-Zeiten. Das war eigentlich durchaus tauglich. Wenn Du hier den Viewport verkleinerst, kannst Du immer noch alle Submenüs ansteuern. Das sollte doch mit Gunnars Menü Nr.1 und Nr.2 auch gehen, oder unterschätze ich den Aufwand?

Nein, da müsste man mit z-index spielen. (Auch bei eventuellen ul ul ulin der 3. Ebene.

Aber trotzdem finde ich da nicht übersichtlich.

Das ist eben das Problem: Die Werbeagenturen haben OnePager mit 3 Menüpunkten und wenig Inhalt; ein KMU oder eine Schule haben hunderte von Unterseiten - wie sortieren, kategorisieren und in der Navigation unterbringen?

Herzliche Grüße

Matthias Scharwies

[JJ]

Hallo Matthias,

Nein, da müsste man mit z-index spielen. (Auch bei eventuellen ul ul ulin der 3. Ebene.

Meine Spielchen mit dem z-index waren bislang nicht von Erfolg gekrönt (siehe Punkt 2). Und ich habe nur eine 2. Ebene. 😉

Aber trotzdem finde ich da nicht übersichtlich.

Gebe ich Dir recht. Kommt aber immer auf die Anwendung an. In miener Anwendung will ich so wenig Text oder Inhalt der Hauptseite durch ein aufgeklapptes Menü verdecken, daher die horizontale Navigation mit horizontaler Subnavigation.

Das ist eben das Problem: Die Werbeagenturen haben OnePager mit 3 Menüpunkten und wenig Inhalt; ein KMU oder eine Schule haben hunderte von Unterseiten - wie sortieren, kategorisieren und in der Navigation unterbringen?

Der Unterschied von Theorie und Praxis. Gilt für werbung im Allgemeinen. 😉

JJ

[Auge]

Hallo

Aber trotzdem finde ich da nicht übersichtlich.

Gebe ich Dir recht. Kommt aber immer auf die Anwendung an. In miener Anwendung will ich so wenig Text oder Inhalt der Hauptseite durch ein aufgeklapptes Menü verdecken, daher die horizontale Navigation mit horizontaler Subnavigation.

Ist denn Platz auf einer Website knapp? Arbeitet man zur temporären Anzeige der Navigation mit position ≠ static und z-index, wird der überdeckte Platz nach der Auswahl eines Navigationpunktes oder dem abbrechen der Aktion wieder freigegeben. Arbeitet man ohne die Positionierung rutscht der Inhalt beim aufklappen der Navigation nach unten und nach Aufruf einer neuen Seite beziehungsweise bei deren schließen wieder nach oben. Und außerdem kann man eine Website, wenn es nicht explizit verhindert wird, mit Tastatur, Maustaste oder -rad oder einem beliebigen Körperteil (üblicherweise ein Finger) scrollen.

So what? Soetwas ist meiner Meinung nach ein kosmetisches Problem und zudem ein eigenes, höchstpersönliches des Seitenerstellers – sprich, ein Besucher einer Website wird sich darum üblicherweise keine Gedanken machen. Darauf sollte man nicht unnötigerweise allzuviel Gehirnschmalz verschwenden. Mehr als ein „pfft“ ist das meiner Meinung nach nicht wert.

Tschö, Auge

[JürgenB]

Hallo,

Dieser Wert für die Viewportbreite von 362px erhöht sich natürlich entsprechend, je breiter die Hauptnavigation ansich ist, also je mehr Inhalt die Hauptnavigation enthält.

das Problem hatte ich auch, wobei ich den Breakpoint in em angegeben hatte. Der benötigte Platz häng auch davon ab, wie der Browser die jeweilige Schrift rendert.

Hier^[1] prüfe ich per Javascript und dem resize-Event, ob der Platz für eine horizontale Navigation noch ausreicht.

Gruß
Jürgen

---

1. Das Tutorial verwendet zum Aufklappen der Menüpunkte details/summary. Damals fand ich das gut, heute bin ich ratlos, ob es besser ist, die Funktion von details/summary mit anderen Elemente nachzubauen. ↩︎

[Matthias Scharwies]

Servus!

Matthias hat mir schon einen Link auf Eure Doku geschickt, aber damit bekomme ich das selber nicht hin.

Ich hab' mir unser Tutorial angeschaut und heute schon angefangen, es zu überarbeiten.

• HTML/Tutorials/Navigation/Grundstruktur

  • gestrafft und aktualisiert: lesenswert

• HTML/Tutorials/Navigation/Dropdown-Menü

  • erste Hälfte gestrafft
  • Gunnars letztes Beispiel mit dem zusätzlichen Button zum Aufklappen werde ich dort Schritt für Schritt erklären, aber erst am Montag

• HTML/Tutorials/Navigation/Flyout-Menü

  • Das Beispiel mit Details muss raus und eine Begründung her, warum das nicht optimal ist( = wir wollen ja keine sub-optimalen Bsp. vorstellen)

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo,

 - Das Beispiel mit Details muss raus und eine Begründung her, warum das nicht optimal ist( = wir wollen ja keine sub-optimalen Bsp. vorstellen)

dann muss aber https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zugängliche_Dropdown-Navigation auch weg.

Das Problem mit der Details-Navigation ist mMn die Unterstützung von Details/Summary in Vorlesebrowsern. Ich habe mal vor einiger Zeit ein einfaches Beispiel mit Details/Summary (keine Navigation) mit Voiceover getestet, das Ergebnis war für mich grauenhaft. Andererseits fand @Marc die Navigation barrierefrei genug.

Gruß
Jürgen

[JJ]

Hallo Matthias,

Ich hab' mir unser Tutorial angeschaut und heute schon angefangen, es zu überarbeiten.

Vielen Dank für Deine Mühe.

 - gestrafft und aktualisiert: **lesenswert**

Stimmt absolut und ich freue mich schon auf Montag, wenn Du Gunnars Beispiel erklärst.

JJ

[Matthias Scharwies]

Guten Morgen!

Stimmt absolut und ich freue mich schon auf Montag, wenn Du Gunnars Beispiel erklärst.

Hmm, ich habe mehr Fragen als Antworten ;-)

Hier ist der erste Schritt:

• Navigation/Dropdown-Menü

(weiter oben findet sich die CSS-Variante, in der ich mit Pseudoelementen Pfeile hinzugefügt habe.

Im folgenden Tutorial werde ich diese Pfeile als Buttons dynamisch erzeugen:

function dropdownExtension () {
	const submenus = document.querySelectorAll('nav li > ul');
	console.log(submenus)
    submenus.forEach(function (submenu) {
      submenu.classList.add('geändert');
	  let button = document.createElement('button');
	  button.setAttribute('aria-expanded','false')
	  let span   = document.createElement('span');
      let myText = document.createTextNode('Untermenü aufklappen');
      span.appendChild(myText);
	  span.classList.add('visually-hidden');
	  button.appendChild(span);
      submenu.before(button);
    });
}

Ist dieser Code so ok? Kann der gekürzt werden?

Mein weiterer Plan

Ich würde die li ul mit JS-Click so einblenden, indem ich ihnen eine Klasse gebe oder wegnehm.

Ohne JS wird mit :hover ja

nav ul ul { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
}

Würdet ihr eine Klasse .visible einführen? Oder es ganz anders machen?

Im nächsten Schritt müsste man die Klasse visible entfernen, sobald Maus, Focus, oder Klick woanders ist.

Bitte gebt Euer Feedback!

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

function dropdownExtension () {
	const submenus = document.querySelectorAll('nav li > ul');
	console.log(submenus)

Das sollte wohl raus.

    submenus.forEach(function (submenu) {

Ist eine einfache Schleife for(let submenu of submenus) nicht besser lesbar als forEach mit Funktion darin? (Und wenn man schon letzteres macht, bietet sich eine Pfeilfunktion an.)

      submenu.classList.add('geändert');
	  let button = document.createElement('button');

Nicht let, sondern const. Das gilt auch für die nachfolgenden.

	  button.setAttribute('aria-expanded','false')
	  let span   = document.createElement('span');
      let myText = document.createTextNode('Untermenü aufklappen');
      span.appendChild(myText);
	  span.classList.add('visually-hidden');
	  button.appendChild(span);
      submenu.before(button);
    });
}

Anstatt alle Element-, Attribut- und Textknoten einzeln zu generieren und in den Baum zu hängen, was aufwendig, schlecht lesbar und auch wenig performant ist, bietet sich an, das in einem Rutsch mit insertAdjacentHTML() zu machen:

submenu.insertAdjacentHTML('beforebegin', `
  <button aria-expanded="false">
    <span class="visually-hidden">Untermenü aufklappen</span>
  </button>
`);

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

function dropdownExtension () {
	const submenus = document.querySelectorAll('nav li > ul');
	console.log(submenus)

Das sollte wohl raus.

    submenus.forEach(function (submenu) {

Ist eine einfache Schleife for(let submenu of submenus) nicht besser lesbar als forEach mit Funktion darin? (Und wenn man schon letzteres macht, bietet sich eine Pfeilfunktion an.)

      submenu.classList.add('geändert');
	  let button = document.createElement('button');

Nicht let, sondern const. Das gilt auch für die nachfolgenden.

	  button.setAttribute('aria-expanded','false')
	  let span   = document.createElement('span');
      let myText = document.createTextNode('Untermenü aufklappen');
      span.appendChild(myText);
	  span.classList.add('visually-hidden');
	  button.appendChild(span);
      submenu.before(button);
    });
}

Anstatt alle Element-, Attribut- und Textknoten einzeln zu generieren und in den Baum zu hängen, was aufwendig, schlecht lesbar und auch wenig performant ist, bietet sich an, das in einem Rutsch mit insertAdjacentHTML() zu machen:

submenu.insertAdjacentHTML('beforebegin', `
  <button aria-expanded="false">
    <span class="visually-hidden">Untermenü aufklappen</span>
  </button>
`);

Ja, viel besser!

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Guten Morgen,

#neue Fragen

Button-Gestaltung

• inklusives_Dropdown-Menü

Die Buttons sind weiße Pfeile. Wenn sie den Focus kriegen, werden sie goldfarben. Ist das deutlich genug? (Ich finde nicht, da das Navigationsfeld gold ist und dann wieder auf blau schaltet. Dass der Pfeil jetzt gold ist, merkt doch keiner, oder?)

Technisches Problem: SVGs als Hintergrundbild erlauben weder currentColor noch den Einsatz von custom properties. Soll ich das SVG in das Button-HTML einfügen?

Dann könnte ich currentColor und die custom properties verwenden.

Für [aria-expanded="true"] würde ich das SVG nur um 90° rotieren.

Klassen oder geht's anderscht?

Entweder füge ich den Submenüs bei Click auf den Button eine Klasse visible hinzu oder …

Kann ich :hover per JavaScript triggern? Ne, oder?

Ich weiß, dass das eigentlich gar nicht gehen kann, aber will's trotzdem ausschließen! 😀

Herzliche Grüße

Matthias Scharwies

[Matthias Scharwies]

Grad wieder zurück von frühlingshaften 15°C im Talboden und hier in Franken Schneeschauer.

Ich stehe grad vor einem Dilemma:

→ Inklusives_Dropdown-Menü

Das fertige Kopierbeispiel soll :hover und Tastaturbedienung in einem vereinen:

• beim CSS-Only habe ich mit focus-within eigentlich schon fast alles dabei.
• in der JS-Variante (Nr 8) (hab das :hover mal rausgenommen) weiß ich nicht weiter.

Meine HTML-Struktur:

-li

 - a

 - button aria-expanded (dynamisch erzeugt)

 - ul class="submenu"

Mein Problem /Fragen:

• Die Buttons (und dss umgebende li) müssten irgendwie besser gekennzeichnet werden, wenn sie im Focus sind, aber wiieee???? Größer? Bunter? Den Text doch wieder einblenden? (*Problem ist, dass erst nav a im Focus ist und der Link einen gelben Hintergrund bekommt was das Dreieck unsichtbar machen würde. So hat der Button einen Hintergund und man kann den Pfeil erkennen)
• Die Buttons sind klickbar
  • Merk ich im Seiteninspektor an der Änderung des [aria-expanded]
  • dann dreht sich der Pfeil nach unten
  • toggle ich die Klasse .visible
• mit dem Schließen hadere ich noch - irgendwie dauert's zu lang, wenn ich auf den Button klicke - wie schließe ich, wenn ich schon weiter bin??? (Im ganzen Dokument auf ESC lauschen und dann alle .visible mit forEach durchlaufen?)

Für jeden Vorschlag bin ich dankbar!

Erst wenn ich das alles gelöst habe, würd' ich danach versuchen, die Pfeil-Bedienung einzubauen.

Stammtisch Mittwoch, 01.03. 20:15

Ich würde die Fragen gerne gemeinsam am nächsten Mittwoch im Stammtisch besprechen - wer würde noch kommen?

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

Stammtisch Mittwoch, 01.03. 20:15

Ich würde die Fragen gerne gemeinsam am nächsten Mittwoch im Stammtisch besprechen - wer würde noch kommen?

ich versuche, rechtzeitig zu Haus zu sein. Dann bin ich dabei.

Gruß
Jürgen

[Der Martin]

Hallo,

Stammtisch Mittwoch, 01.03. 20:15

Ich würde die Fragen gerne gemeinsam am nächsten Mittwoch im Stammtisch besprechen - wer würde noch kommen?

am 1. März hat meine Schwester Geburtstag und wird 50. Sie will aber keine große Party machen und lädt auch nicht ein - zumindest nicht an diesem Mittwoch. Vielleicht will sie das irgendwann nachholen.

Also wird's am Mittwoch mit einem telefonischen Glückwunsch getan sein, und ich sehe mindestens 95% Wahrscheinlichkeit, dass ich beim Stammtisch am Abend dabei bin. Wieviel ich fachlich beitragen kann, steht aber auf einem anderen Blatt.

Außerdem hat mich Amors Pfeil irgendwie erwischt und ich bin mir noch völlig im Unklaren, wie ich mit der Situation umgehen will und kann ... 🥰
Eins ist mal klar: Wenn da was draus wird, dann wird es eine interessante, aber auch anstrenge herausfordernde Beziehung.

Einen schönen Tag noch
 Martin