* **[Navigation](https://wiki.selfhtml.org/wiki/Navigation)** - alles über Menüs und Navigationen # Konventionen geben Sicherheit! Bereits 2003 gab es in der alten Doku eine [Dynamische Navigationsleiste](https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm), die folgende Warnung enthielt: ***Beachten Sie:** Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. …* [^1] [^1]: [Dynamische Navigationsleiste](https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm) (de.selfhtml.org/dhtml/beispiele/navigation.htm) Aus heutiger Sicht fällt die Schwachstelle sofort auf: Niemand will raten oder nachlesen müssen, um eine Navigation bedienen zu können. So wie der gewohnte Ort für die Taschenlampe in der Schublade an der Haustür sicherstellt, dass ich sie im Falle eines Stromausfalls auch zur Hand habe, verlassen sich gute Webseiten auf **Konventionen, die Anwendern vertraut sind**, damit Webseiten schnell und kom&shy;for&shy;tabel bedient werden können. Solch ein gewohntes *Look & Feel* berücksichtigt … 1. die Leserichtung von oben links nach rechts und positioniert die Navigation gut sichtbar. 2. Die aktuelle Seite ist gekennzeichnet und 3. die Linktexte sind klar und verständlich, damit Nutzer schnell und sicher zur gewünschten Seite kommen. Um eine Navigation übersichtlich zu halten, kann sie zweitrangige Links zunächst verbergen und diese durch eine Benutzerinteraktion sichtbar machen: * [Navigation/Dropdown-Menü](https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC) * [Navigation/Flyout-Menü](https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC) # Dropdown ohne JavaScript? Früher war eine reine CSS-Lösung, die mit :hover aufgeklappt wurde, möglich, heute reicht das nicht mehr! Warum? Heute ist das Netz größer und vielfältiger geworden: * Mehr als die Hälfte der Nutzer surft mit dem Handy oder Tablet. Dort gibt es keine Maus! * Sehbehinderte - aber auch Autofahrer und Menschen am Herd - lassen sich Seiten vorlesen. * In ihrer Motorik eingeschränkte Menschen - aber auch IT-Profis navigieren lieber mit der Tab-Taste. CSS-basierte Dropdown-Menüs basierten darauf, dass ein Nutzer einen Link zweifach benutzen konnte: 1. `:hover` mit der Maus öffnet das zuvor verborgene Submenü 2. ein Klick aktiviert den Link und führt zur neuen URL Webseiten, die alle die oben erwähnten Nutzer mit einschließen wollen, müssen das trennen. Deshalb benötigt man neben dem Link einen Button, mit dem man das Untermenü per JS öffnen kann. Dies geschieht über das Setzen und Entfernen eine Klasse, die Formatierung übernimmt CSS. Das im überarbeiteten Tutorial vorgestellte Drowpdown-Menü wird Schritt für schritt aufgebaut und erklärt; bietet aber auch eine [**Kopiervorlage für Ungeduldige**](https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC#Kopiervorlage_f.C3.BCr_Ungeduldige). Sie kann in bestehende Seiten eingebunden werden und erweitert eine „normale“ Navigation mit Liste und Unterlisten zu einem zugänglichen Drowpdown-Menü. <hr> BTW: Das oben erwähnte Beispiel aus dem Jahre 2003 war nicht der einzige Versuch einer Dropdown-Navigation. Dieser Screenshot zeigt ein Beispiel aus dem Jahre 2011 mit einer `parentNode`-Kette, , weil es den IE6 berücksichtigen musste.[^2] [^2]: [Museum/Eine zugängliche Multilevel-Dropdown-Navigation](https://wiki.selfhtml.org/wiki/Museum/Eine_zug%C3%A4ngliche_Multilevel-Dropdown-Navigation) von Beatovich, 2011 [](/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png) Hoffen wir, dass unsere 2024er Version auch mehrere Jahre übersteht! 😀

* **[Navigation](https://wiki.selfhtml.org/wiki/Navigation)** - alles über Menüs und Navigationen # Konventionen geben Sicherheit! Bereits 2003 gab es in der alten Doku eine [Dynamische Navigationsleiste](https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm), die folgende Warnung enthielt: ***Beachten Sie:** Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. …* [^1] [^1]: [Dynamische Navigationsleiste](https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm) (de.selfhtml.org/dhtml/beispiele/navigation.htm) Aus heutiger Sicht fällt die Schwachstelle sofort auf: Niemand will raten oder nachlesen müssen, um eine Navigation bedienen zu können. So wie der gewohnte Ort für die Taschenlampe in der Schublade an der Haustür sicherstellt, dass ich sie im Falle eines Stromausfalls auch zur Hand habe, verlassen sich gute Webseiten auf **Konventionen, die Anwendern vertraut sind**, damit Webseiten schnell und kom&shy;for&shy;tabel bedient werden können. Solch ein gewohntes *Look & Feel* berücksichtigt … 1. die Leserichtung von oben links nach rechts und positioniert die Navigation gut sichtbar. 2. Die aktuelle Seite ist gekennzeichnet und 3. die Linktexte sind klar und verständlich, damit Nutzer schnell und sicher zur gewünschten Seite kommen. Um eine Navigation übersichtlich zu halten, kann sie zweitrangige Links zunächst verbergen und diese durch eine Benutzerinteraktion sichtbar machen: * [Navigation/Dropdown-Menü](https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC) * [Navigation/Flyout-Menü](https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC) # Dropdown ohne JavaScript? Früher war eine reine CSS-Lösung, die mit :hover aufgeklappt wurde, möglich, heute reicht das nicht mehr! Warum? Heute ist das Netz größer und vielfältiger geworden: * Mehr als die Hälfte der Nutzer surft mit dem Handy oder Tablet. Dort gibt es keine Maus! * Sehbehinderte - aber auch Autofahrer und Menschen am Herd - lassen sich Seiten vorlesen. * In ihrer Motorik eingeschränkte Menschen - aber auch IT-Profis navigieren lieber mit der Tab-Taste. CSS-basierte Dropdown-Menüs basierten darauf, dass ein Nutzer einen Link zweifach benutzen konnte: 1. `:hover` mit der Maus öffnet das zuvor verborgene Submenü 2. ein Klick aktiviert den Link und führt zur neuen URL Webseiten, die alle die oben erwähnten Nutzer mit einschließen wollen, müssen das trennen. Deshalb benötigt man neben dem Link einen Button, mit dem man das Untermenü per JS öffnen kann. Dies geschieht über das Setzen und Entfernen eine Klasse, die Formatierung übernimmt CSS. Das im überarbeiteten Tutorial vorgestellte Drowpdown-Menü wird Schritt für schritt aufgebaut und erklärt; beitet aber auch eine [**Kopiervorlage für Ungeduldige**](https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC#Kopiervorlage_f.C3.BCr_Ungeduldige). Sie kann in bestehende Seiten eingebunden werden und erweitert eine „normale“ Navigation mit Liste und Unterlisten zu einem zugänglichen Drowpdown-Menü. Das oben erwähnte Beispiel aus dem Jahre 2003 war nicht der einzige Versuch aktuell zu bleiben. Dieser Screenshot zeigt ein Beispiel mit einer `parentNode`-Kette, , weil es den IE6 berücksichtigen musste.[^2] [^2]: [Museum/Eine zugängliche Multilevel-Dropdown-Navigation](https://wiki.selfhtml.org/wiki/Museum/Eine_zug%C3%A4ngliche_Multilevel-Dropdown-Navigation) von Beatovich, 2011 [](/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png) Hoffen wir, dass unsere 2024er Version auch mehrere Jahre übersteht! 😀

* **[Navigation](https://wiki.selfhtml.org/wiki/Navigation)** - alles über Menüs und Navigationen # Konventionen geben Sicherheit! Bereits 2003 gab es in der alten Doku eine [Dynamische Navigationsleiste](https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm), die folgende Warnung enthielt: ***Beachten Sie:** Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. …* [^1] [^1]: [Dynamische Navigationsleiste](https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm) (http://de.selfhtml.org/dhtml/beispiele/navigation.htm) Aus heutiger Sicht fällt die Schwachstelle sofort auf: Niemand will raten oder nachlesen müssen, um eine Navigation bedienen zu können. So wie der gewohnte Ort für die Taschenlampe in der Schublade an der Haustür sicherstellt, dass ich sie im Falle eines Stromausfalls auch zur Hand habe, verlassen sich gute Webseiten auf **Konventionen, die Anwendern vertraut sind**, damit Webseiten schnell und kom&shy;for&shy;tabel bedient werden können. Solch ein gewohntes *Look & Feel* berücksichtigt … 1. die Leserichtung von oben links nach rechts und positioniert die Navigation gut sichtbar. 2. Die aktuelle Seite ist gekennzeichnet und 3. die Linktexte sind klar und verständlich, damit Nutzer schnell und sicher zur gewünschten Seite kommen. Um eine Navigation übersichtlich zu halten, kann sie zweitrangige Links zunächst verbergen und diese durch eine Benutzerinteraktion sichtbar machen: * [Navigation/Dropdown-Menü](https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC) * [Navigation/Flyout-Menü](https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC) # Dropdown ohne JavaScript? Früher war eine reine CSS-Lösung, die mit :hover aufgeklappt wurde, möglich, heute reicht das nicht mehr! Warum? Heute ist das Netz größer und vielfältiger geworden: * Mehr als die Hälfte der Nutzer surft mit dem Handy oder Tablet. Dort gibt es keine Maus! * Sehbehinderte - aber auch Autofahrer und Menschen am Herd - lassen sich Seiten vorlesen. * In ihrer Motorik eingeschränkte Menschen - aber auch IT-Profis navigieren lieber mit der Tab-Taste. CSS-basierte Dropdown-Menüs basierten darauf, dass ein Nutzer einen Link zweifach benutzen konnte: 1. `:hover` mit der Maus öffnet das zuvor verborgene Submenü 2. ein Klick aktiviert den Link und führt zur neuen URL Webseiten, die alle die oben erwähnten Nutzer mit einschließen wollen, müssen das trennen. Deshalb benötigt man neben dem Link einen Button, mit dem man das Untermenü per JS öffnen kann. ... [](/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png)

* **[Navigation](https://wiki.selfhtml.org/wiki/Navigation)** - alles über Menüs und Navigationen # Konventionen geben Sicherheit! Bereits 2003 gab es in der alten Doku eine [Dynamische Navigationsleiste](https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm), die folgende Warnung enthielt: ***Beachten Sie:** Erklären Sie dem Anwender auf der ersten Seite, wo Sie eine solche Navigation verwenden, kurz mit einem Satz das Handling der Navigation. …* [^1] [^1]: [Dynamische Navigationsleiste](https://web.archive.org/web/20030308125507/http://de.selfhtml.org/dhtml/beispiele/navigation.htm) (http://de.selfhtml.org/dhtml/beispiele/navigation.htm) Aus heutiger Sicht fällt die Schwachstelle sofort auf: Niemand will raten oder nachlesen müssen, um eine Navigation bedienen zu können. So wie der gewohnte Ort für die Taschenlampe in der Schublade an der Haustür sicherstellt, dass ich sie im Falle eines Stromausfalls auch zur Hand habe, verlassen sich gute Webseiten auf **Konventionen, die Anwendern vertraut sind**, damit Webseiten schnell und komfortabel bedient werden können. Solch ein gewohntes *Look & Feel* berücksichtigt 1. die Leserichtung von oben links nach rechts und positioniert die Navigation gut sichtbar. 2. Die aktuelle Seite ist gekennzeichnet und 3. die Linktexte sind klar und verständlich, damit Nutzer schnell und sicher zur gewünschten Seite kommen. Um eine Navigation übersichtlich zu halten, kann sie zweitrangige Links zunächst verbergen und diese durch eine Benutzerinteraktion sichtbar machen: * [Navigation/Dropdown-Menü](https://wiki.selfhtml.org/wiki/Navigation/Dropdown-Men%C3%BC) * [Navigation/Flyout-Menü](https://wiki.selfhtml.org/wiki/Navigation/Flyout-Men%C3%BC) # Dropdown ohne JavaScript? Früher war eine reine CSS-Lösung, die mit :hover aufgeklappt wurde, möglich, heute reicht das nicht mehr! Warum? Heute ist das Netz größer und vielfältiger geworden: * Mehr als die Hälfte der Nutzer surft mit dem Handy oder Tablet. Dort gibt es keine Maus! * Sehbehinderte - aber auch Autofahrer und Menschen am Herd - lassen sich Seiten vorlesen. * In ihrer Motorik eingeschränkte Menschen - aber auch IT-Profis navigieren lieber mit der Tab-Taste. Webseiten, die alle diese Nutzer mit einschließen wollen, müssen das trennen ... [](/images/70ae42c0-b13d-11ed-9996-b42e9947ef30.png)