So verwenden Sie display:olck/none zum Erstellen einer Menüleiste

Die Auswirkung der Vervollständigung einer Menüleiste durch display:bolck/none Abbildung 1:

Hier ist zunächst ein fertiger Effekt. Wenn wir die Maus in den Bereich „Menü“ bewegen, wird es eingeblendet. Der Effekt von Abbildung 2

Abbildung 2:

Wenn wir die Maus hingegen aus dem Bereich „Menü“ heraus bewegen, wird das darunter liegende Untermenü ausgeblendet und wir erhalten den in Abbildung 1 gezeigten Effekt.

Abbildung 3:

Der Quellcode in der Abbildung ist die Implementierung der Inhaltsstilstruktur von Abbildung 1 und Abbildung 2. Wir geben zuerst ein großes Div ein, um eine große Box für den anzuzeigenden Inhalt zu erstellen, und fügen 5 Divs in die Box ein, um den anzuzeigenden Inhalt zu vervollständigen. Legen Sie dann für diese 5 Divs einen „Links-Float“-Stil fest, damit sie nebeneinander in einer Reihe angeordnet werden können. Natürlich können Sie es auch auf ein „Inline-Blockelement“ festlegen und eine „ungeordnete Liste“ darin einfügen, um den Inhalt des Untermenüs anzuzeigen.

Abbildung 4:

1. Lassen Sie uns zunächst einige grundlegende Stile für die oberste li festlegen. Geben Sie diesem Tag eine (absolute Positionierung) position: relative; legen Sie dann eine (relative Positionierung) position: absolute für die untergeordnete ul fest; 2. Setzen Sie die |Anzeige| dieser ul auf |Keine|, um sie auszublenden – siehe Abbildung 5 – Teil U2. 3. Stellen Sie dann den (Pseudoklassen-)Hover so ein, dass er den Klassennamen der untergeordneten UL aufruft, und stellen Sie die | Anzeige | der UL auf | Block | ein. —— Abbildung 4 —— Beachten Sie, dass die untergeordnete UL angezeigt wird, wenn die Maus über dieses li bewegt wird.

Abbildung 5:

Wenn Sie schließlich das Gefühl haben, dass der Effekt etwas steif ist, können wir @keyframes verwenden, um den Transform-Animationseffekt festzulegen und den gewünschten Animationseffekt entsprechend unseren eigenen Vorlieben einzustellen.

Dies ist das Ende dieses Artikels zum Vervollständigen einer Menüleiste über display:olck/none. Weitere relevante Inhalte für die Menüleiste display:olck/none finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!