CSS Dropdowns ohne Hindernisse
 

Ich glaube so manch einer von euch wird CSS Dropdowns kennen.

Praktisch wie ich finde, allerdings sind die meisten Umsetzungen mit Hacks nur so vollgestopft - und auch nicht unbedingt sematisch korrekt. Und wozu das ganze? Genau, der liebe Internet Explorer.

Da ich schon seit längeren einen anderen Weg gehen will, und auch kann, erarbeite ich gerade eine Umsetzung die sematisch korrekt und auch keine Hacks beinhalten soll.

Wie würde ich mich doch freuen, wenn alle Browser die CSS 2.1 Selektoren vollkommen unterstützen würden.

Schließlich müssen wir irgendwann einen Schritt nach vorne tun, die Zukunft bringt viel gutes: CSS 3, XHTML 2 usw. usw..

So genug geschrieben. ;)

Wie ich finde sematisch korrekter als manch andere Lösung, die z.b. headings benutzt. Eine Definations Liste ist hier völlig i. O., besser wäre natürlich eine Navigations Liste, aber das unterstützt bisher meines Wissens nach noch kein Browser.

Und zum guten Schluss noch ein bissle CSS, und das gute Stück ist fertig.

So, wenn sich nun einer fragen sollte was das ganze soll - ganz einfach - ich wollte damit nur zeigen das die Zukunft uns vieles erleichtert. :)

Was ist eure Meinung dazu?

Vorallem würden mich noch andere Ansätze interessieren, z. B. solche, die CSS 3 und/oder XHTML 2 benutzen.

Ich bin bereits ein großer Freund des :hover Pseudoklasse geworden und nutze es für eine Reihe an Kleinigkeiten. Zum Beispiel lass ich in Tabellen gerne die einzelnen Reihen hervorheben, wenn ein Nutzer mit dem Mauszeiger drüberfährt. Nutzer des IE bleiben dann zwar außen vor, aber verpassen du sie deswegen auch nichts.

Nur kurze Anmerkungen zu deinem Quelltext: Du solltest keine Definitionsliste wählen, sondern eine geordnete oder ungeordnete Liste (je nach Aufbau der Navigation). Es handelt sich um keine klassische Definition von Begriffen.

Außerdem wäre es sinnvoller, die Elemente mit Hilfe von position: absolute; left: -200em; aus dem sichtbaren Bereich zu entfernen. Bestimmte Screenreader ignorieren Elemente, die mit Hilfe von display: none; ausgeblendet werden und ich vermute an dieser Stelle, dass die :hover Implementierung ebenfalls nicht sauber dort abläuft.

Gruß

Ich habe schon viele Diskussionen darüber gelesen, wie man eine Navigation sematisch korrekt darstellen könnte/sollte.

Es gab z. B. welche die die Lösung mit headings bevorzugt haben.

Beispiel:
Und es gab welche die einfach nur eine Liste bevorzugt haben, so ähnlich wie du.

Doch ich bin der Meinung das hier eine Definationsliste völlig ok ist, ich gehe sogar so weit und behaupte das sie sematisch gesehen am geeignetesten ist.

Vl. kurz eine Erklärung wieso ich der Meinung bin - auch wenn ich nicht gut im Erklären bin ;):

Wenn man einen Punkt in der Navigation festlegt, der noch Unterpunkte enthält, definiert man M. m. nach diesen oberen Punkt - ich sagte es doch, ich bin nicht gut im Erklären :D.

Vl. sollte ich mein Beispiel von oben noch etwas umbauen, in etwa so:

Die Navigations Listen in XHTML 2 gehen da einen ähnlichen weg.

An die lieben Screenreader habe ich garnicht gedacht.
Da muss ich dir jetzt mal zustimmen.

Btw: Auch wenn es egal sein kann, ein kleiner Tipp: Niemals einen Wert über 1000em nehmen (oder waren es 1000px?), Opera zeigt sonst einen horizontalen Scrollbalken an.

Aber ich kann dich beruhigen, ich habe das ganze getestet, es funktioniert. :)

Btw: Ich habe das ganze mal zusammengefasst und bei mir hochgeladen: CSS Dropdowns.

Obwohl ich mir mit der geordneten Liste nicht so sicher bin, aann sollte man eine geordnete und wann eine ungeordnete Liste nehmen?

Ich war bisher zumindest der Meinung das wenn die Navigation einen bestimmten Ablaut hat, denn man folgen sollte, nimmt man eine geordnete Liste, ansonsten eine ungeordnete.

Wenn ich mir über die Nutzung eines Elements unsicher bin, so wähle ich eine einfache Technik um dies zu prüfen: Wie würde ich auf einem Blatt Papier die Informationen veröffentlichen und wie übertrage ich diese dann in das Internet.

Eine Definitionsliste, sie sagt es eigentlich bereits aus, ist eine Liste an Definitionen. Ein Beispiel für eine Definitionsliste wäre http://de.selfhtml.org/html/text/anzeige/dl_dt_dd.htm - In deinem Beispiel definierst du zwar in der Tat die Navigation als die Liste, aber es trifft eigentlich nicht auf den Verwendungszweck zu.

Ich bevorzuge die Einleitung mit Hilfe einer Headline, da Nutzer von Screenreadern beispielsweise zwischen Headlines navigieren können. So sind sie sofort in der Lage die Navigation inklusive sämtlicher Links zu überspringen.

Ich nutze 200em, entspricht in meinem Style 2000 Pixel, und besitze das Problem nicht. Allerdings könnte dies ein Grund sein, warum ich ab und zu solche Seiten antreffe :)

Hättest du da ein paar gute Links für mich?
Konnte nichts finden, das mit weiterhelfen würde.

Außerdem würde es mich freuen wenn du mir Links zukommen lassen könntest, die sich mit Definitionslisten beschäftigen und wie man sie richtig einsetzt.

Ich werde später mal meine Lesezeichen durchforsten und dann ebenfalls ein paar Links posten.

Danke. :)

Mit guten Links kann ich leider nicht dienen. Ich hatte mal vor ein paar Monaten ein Video gesehen, in welchem eine blinde Surferin während eines Surfgangs die Zugänglichkeit von Websites kommentierte. Das ganze hatte ich über drei Ecken als DVD erhalten, aber die liegt in Deutschland. Irgendwo im Netz soll es etwas ähnliches geben.

http://www.w3.org/TR/html401/struct/lists.html#edef-DL

http://de.selfhtml.org/html/text/listen.htm#definition

Ich habe so etwas gerade gebaut und dabei einfache Listen benutzt. Das ganze sieht so in der Art aus und funktioniert je nach Wunsch mit Java-Script oder Pseudoklassen wie :hover bestens. In meinem Beispiel habe ich Java-Script verwendet, um die Kompatibilität zu technisch rückständigen Browsern (die meistens auch nicht JS deaktiviert haben...hehe) zu gewährleisten.

Die CSS-Implementation noch dazu...

Diese Technik ist gerade für Textbrowser und Screenreader ideal, da Listen eine Navigation ideal auszeichnen. Michaels Demo kann Safari übrigens keine Navigation entlocken :)