Kostenlose Schritt für Schritt Anweisungen 
Erstellen sie ein dropdown-menü mit html und css
Mit einem Dropdown-Menü erstellen Sie eine klare und hierarchische Übersicht über alle wichtigen Teile der Seite und die Unterbereiche, die die Seite enthält. Sie müssen nur Ihre Maus über die Hauptabschnitte bewegen, um die Unterabschnitte anzuzeigen. Sie können ein Dropdown-Menü nur mit HTML und CSS erstellen.
Schritte
Teil 1 von 2: HTML schreiben
1. Erstellen Sie Ihren Navigationsbereich. Normalerweise benutzt du
2. Geben Sie jedem Abschnitt ein Klassenattribut. Wir werden das class-Attribut später verwenden, um diese Elemente mit CSS zu stylen. Geben Sie sowohl dem Container als auch dem Menü ein eigenes Klassenattribut.
Klasse="Navi-Wrapper"> Klasse="Navigationsmenü"> 
3. Fügen Sie eine Liste mit Menüpunkten hinzu. Die ungeordnete Liste ( 
4. Links hinzufügen. Wenn diese Menüpunkte der obersten Ebene auch auf ihre eigenen Seiten verweisen, können Sie die Links jetzt einfügen. Link zu einem nicht existierenden Anker (wie "#!"), auch wenn sie auf nichts verlinken, sodass der Cursor des Benutzers anders aussieht. In diesem Beispiel führt Kontakt nirgendwo hin, aber die anderen beiden Menüpunkte tun es:
5. Erstellen Sie Unterlisten für die Dropdown-Elemente. Nachdem der Stil erstellt wurde, bilden diese Listen das Dropdown-Menü. Platzieren Sie die Liste in dem Listenelement, über das der Benutzer mit der Maus fahren wird. Fügen Sie wie zuvor ein Klassenattribut und einen Link hinzu.
-
Teil 2 von 2: CSS schreiben
1. Öffnen Sie Ihr CSS-Stylesheet. Platzieren Sie einen Link zu Ihrem CSS-Stylesheet im Kopfbereich Ihres HTML-Dokuments, falls der Link noch nicht vorhanden ist. In diesem Artikel werden wir nicht auf die Grundlagen von CSS eingehen, wie zum Beispiel das Festlegen einer Schriftart und einer Hintergrundfarbe.
2. Clearfix-Code hinzufügen. Erinnerst du dich, als du die bekommen hast? "klare Lösung"-Klasse zur Menüliste? Normalerweise haben die Elemente des Dropdown-Menüs einen transparenten Hintergrund, wodurch andere Elemente verschoben werden können. Eine einfache CSS-Optimierung kann dieses Problem beheben. Hier ist eine nette, schnelle Lösung, die jedoch in Internet Explorer 7 und früheren Versionen nicht funktioniert:- .clearfix:nach {
- Inhalt: "";
- Anzeige: Tabelle;
- }
3. Erstellen Sie das Grunddesign. Mit diesem Code können Sie Ihr Menü oben auf der Seite platzieren und die Dropdown-Elemente ausblenden. Dies ist absichtlich sehr nüchtern, damit wir uns auf den relevanten Code konzentrieren können. Sie können es später mit zusätzlichem CSS-Code wie Padding und Margin anpassen.- .Navi-Wrapper {
- Breite:100%;
- Hintergrund: #008B8B;
- }
- .Navigationsmenü {
- Position: relativ;
- Anzeige: Inline-Block;
- }
- .Untermenü {
- Position: absolut;
- Anzeige: keine;
- Hintergrund: #555;
- }
4. Lassen Sie die Dropdown-Elemente erscheinen, wenn Sie mit der Maus darüber fahren. Die Elemente in der Dropdown-Liste sind jetzt so eingestellt, dass sie nicht angezeigt werden. So lassen Sie eine ganze Unterliste erscheinen, wenn Sie die "Elternteil" bewegt:- .Navigationsmenü ul li:hover > ul {
- Bildschirmsperre;
- }
- Hinweis – Wenn die Menüelemente im Dropdown-Menü zusätzliche Menüs enthalten, gelten die hier hinzugefügten Eigenschaften für alle Menüs. Wenn der Stil nur auf die erste Ebene der Dropdowns angewendet werden soll, verwenden Sie stattdessen ".Navigationsmenü > ul".
5. Zeigen Sie mit einem Pfeil an, dass es ein Dropdown-Menü gibt. Webdesigner zeigen normalerweise mit einem Abwärtspfeil an, dass ein Element ein Dropdown-Menü öffnet. Dieser Code fügt diesen Pfeil zu jedem Element in Ihrem Menü hinzu:- .Navigationsmenü > ul > li:nach {
- Inhalt: "25BC"; /*escaped Unicode für den Abwärtspfeil*/
- Schriftgröße: .5em;
- Bildschirmsperre;
- Position: absolut;
- }
- Hinweis — Passen Sie die Position des Pfeils mithilfe der Eigenschappen-Eigenschaften oben, unten, rechts oder links an.
- Hinweis – Wenn nicht alle Ihre Menüelemente Dropdown-Menüs haben, entwerfen Sie nicht das gesamte Klassennavigationsmenü. Fügen Sie stattdessen eine weitere Klasse (wie Dropdown) zu jedem li-Element hinzu, in dem Sie einen Pfeil haben möchten. Beziehen Sie sich auf diese Klasse im obigen Code.
6. Passen Sie die Polsterung, den Hintergrund und andere Eigenschaften an. Das Menü sollte jetzt funktionieren, aber es ist noch nicht sehr schön. Mit den CSS-Eigenschaften können Sie anpassen, wie jede Klasse oder jedes Element aussieht und wo sie sich befinden.Tipps
- Wenn Sie einem Formular ein Dropdown-Menü hinzufügen möchten, ist dies in HTML5 mit dem Element sehr einfach
- mit dem link
- Wenn Sie den Beispielcode kopieren und einfügen, entfernen Sie alle Aufzählungszeichen.
"Erstellen sie ein dropdown-menü mit html und css"
Оцените, пожалуйста статью
