Erstellen eines reinen CSS Drop-Down-Menü - CSS Wizardry - CSS Architektur, Web Performance Optimization,

Geschrieben von Harry Robert auf CSS Wizardry.

Dieser Artikel wurde aus dem heute nicht mehr existierenden venturelab Devblog portiert, wo ich ursprünglich verfasst hatte.

Das Konzept

Wie half ich die NHS schnell ein neues Produkt zu bauen.

Dies ist, wo die Magie passiert-wir verwenden CSS eine Reihe von verschachtelten zu transformieren

s in eine glatte, leicht zu bedienen, ordentlich und in sich geschlossene Dropdown-Menü.

Nur ein regelmäßiges horizontales Navigationsmenü ...

Richtig, lassen Sie uns jetzt, dass brechen ... Der erste Abschnitt ist ziemlich selbsterklärend-hier sind wir nur eine regelmäßige horizontale Navigationsmenü einrichten, das gleiche wie jeder andere. Beachten Sie jedoch, dass Wähler wie .nav li und .nav li a werden alle Listenelemente und Links in den Dropdown-Listen wählen. Hier verwenden wir die Kaskade vernünftig.

Eine Sache der Anmerkung jedoch ist die Anwendung position: relative; auf die Listenelemente, ermöglicht uns Position zu verwenden: absolute; auf der verschachtelten

s später.

Die verschachtelten Listen

Hier haben wir die CSS, dass die Kontrollen

s innerhalb der Top-Level-Listenelemente verschachtelt. Natürlich müssen wir Kugeln mit list-style entfernen: keine ;. dann Position: absolute; die Drop-down über das Listenelement zu positionieren, dass es hält.

Eine bessere, zugängliche Lösung als display: none; ...

Die nächste Zeile ist jedoch ein Punkt von Interesse. Normalerweise würden die meisten Menschen Display verwenden: none; die Drop-down zu verbergen, während es nicht verwendet wird, sondern aufgrund einer Menge von Screenreadern etwas mit Anzeige zu ignorieren: none; angewandt, das ist sehr unzugänglich. Was wir tun, ist, anstatt sich die Tatsache zunutze nehmen die

wenn nicht in Gebrauch ist absolut -9999px weg positioniert und es nur Bildschirm positionieren.

Hier stellen wir die Standardlistenelement und Link-Styles auf. Beachten Sie die padding-top: 1px; auf der

• . Da alle Farben etc. sind auf die Anwendung . Putting eine 1px Polsterung auf der
• in der Tat drückt die -und somit die Farb weg vom Rand des Listenelements, es die Illusion, dass sie alle voneinander getrennt sind. Interessanterweise IE wird das Layout der nicht erkennen
• wenn schwebte, wieder schließt das Drop-down. Um dies zu umgehen, habe ich als Hintergrund ein 1 × 1 Pixel transparent GIF-Bild. Auch hier entfernen wir den Schwimmer früher angewandt.

  Als nächstes wird auf .nav ul a. wir wenden white-space: nowrap; Umwickeln von Gegenständen auf zwei Linien zu verhindern, eine konsistente Anzeige zu gewährleisten.

  Und das ist, wo die Magie passiert ...

  Das letzte Stück Code ist das Bit, das das Dropdown tatsächlich erscheinen läßt, wenn das Listenelement, das es enthält schwebte wird. Jetzt, da die: hover Pseudo-Klasse funktioniert nur auf der Element in IE6, werden die Dropdown-Listen nicht in diesem Browser arbeiten. Das kann durch die Verwendung einer Vielzahl von Fixes gelindert werden. Doch als Dropdown-Listen progressiv sind, dann sind wir in Ordnung mit ihnen nicht arbeiten. Wenn Sie jedoch nicht möchten, diese Arbeit in IE6 erhalten dann Lösungen meine favorisierte ist durch Verwendung von Verhalten.

  Dies wird schwierig, aber es sollte Sinn machen.

  Dieser Codeblock ist hier, wo die Hover-Stile kommen, gibt es ein wenig geschickten Code in dort, die kontrolliert, was wir als "persistierende schweben Staaten auf der obersten Ebene Punkt aufrufen werden, selbst wenn der Benutzer die Drop-down-Elemente schwebt ...

  nav li: hover a ist, was Sie die Top-Level-Link, um eine persistierende Hover Zustand zu geben, erlaubt, wenn seine ‚Kinder‘ schwebt. Dies funktioniert, indem sie jeden Link in einem list-item Styling, wenn diese Liste Punkt schwebte wird. Dieses Bit wird ein bisschen schwierig, aber Geduld mit mir:

  • der Drop-Down
    sitzt im Inneren eines
    • .
    • Wenn Sie über einen Link schweben ( ) In einem Drop-Down (
      ), Dann sind Sie auch zur gleichen Zeit, noch das Top-Level-list-item schweben (
      • ), Wie Sie Inhalte in ihm schweben.
      • Weil Sie technisch noch sind die Top-Level-list-item schwebt, die .nav li: hover a bleibt wahr, eine persistierende Hover-Stil auf der obersten Ebene list-item verlassen damit…

      ... durch ein Drop-Down-Element schweben schweben Sie immer noch das Top-Level-list-Element, das die Kaskade noch Stile alle Links in dieser Liste Punkt bedeutet. Puh!

      Wir fügen auch einen Hauch von Webkit Güte, die Links zu sagen zu transformieren. -webkit-Übergang: -webkit-Transformations 0.075s linear; Webkit erzählt ohne Fade-in / out die -webkit-Transformation wenden wir später im Code über 0,075 Sekunden zu animieren. Halten Sie Ausschau nach der Einleitung des in dem nächsten (und letzten) Block von CSS.

      Letztes Wort

      In Verbindung stehende Artikel

      • Wie man ein reines CSS Dropdown-Menü erstellen

      • Reines CSS Menu mit unendlichem Untermenü, Devin R