Inhalt

• Schreiten
• Teil 1 von 2: HTML schreiben
• Teil 2 von 2: Schreiben des CSS
• Tipps

Mit einem Dropdown-Menü erstellen Sie eine klare und hierarchische Übersicht aller wichtigen Teile der Seite und der auf der Seite enthaltenen Unterabschnitte. Sie müssen nur Ihre Maus über die Hauptabschnitte bewegen, damit die Unterabschnitte angezeigt werden. Sie können ein Dropdown-Menü nur mit HTML und CSS erstellen.

Schreiten

Teil 1 von 2: HTML schreiben

1. Erstellen Sie Ihren Navigationsbereich. Normalerweise verwenden Sie nav> für die website-weite Navigationsleiste, header> für kleinere Linkabschnitte, die seitengebunden sind, oder div>, wenn keine andere Option zu passen scheint. Platzieren Sie dies in einem div> -Element, damit Sie den Stil sowohl des Containers als auch des Menüs selbst anpassen können.
   • div>
   • nav>
   • / nav>
   • / div>
2. Geben Sie jedem Abschnitt ein Klassenattribut. Wir werden das Klassenattribut später verwenden, um den Stil dieser Elemente mit CSS zu ändern. Geben Sie sowohl dem Container als auch dem Menü ein eigenes Klassenattribut.
   • div>
   • nav>
   • / nav>
   • / div>
3. Fügen Sie eine Liste der Menüelemente hinzu. Die ungeordnete Liste (ul>) enthält die Elemente des Hauptmenüs (Listenelemente li>). Wenn der Benutzer mit der Maus darüber fährt, werden die Dropdown-Menüs angezeigt. Fügen Sie Ihrem Listenelement die Klasse "clearfix" hinzu. Wir werden später in der CSS-Tabelle darauf zurückkommen.
   • div>
   • nav>
   •       ul>
   •          li> Home / li>
   •          li> Mitarbeiter
   •          li> Kontakt
   •          / li>
   •       / ul>
   • / nav>
   • / div>
4. Links hinzufügen. Wenn diese Menüelemente der obersten Ebene auch mit ihren eigenen Seiten verknüpft sind, können Sie jetzt die Links einfügen. Verknüpfen Sie mit einem nicht vorhandenen Anker (z. B. "#!"). Auch wenn sie mit nichts verknüpft sind, sieht der Cursor des Benutzers anders aus. In diesem Beispiel führt Kontakt nirgendwo hin, aber die beiden anderen Menüpunkte tun Folgendes:
   • div>
   • nav>
   • ul>
   • li>a href = "/">Zuhause/ a>/ li>
   • li>a href = "/ Mitarbeiter">Mitarbeiter/ a>
   • / li>
   • li>a href = "#!">Kontakt/ a>
   • / li>
   • / ul>
   • / nav>
   • / div>
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 fährt. Fügen Sie wie zuvor ein Klassenattribut und einen Link hinzu.
   • div>
   • nav>
   • ul>
   • li> a href = "/"> Home / a> / li>
   • li> a href = "/ Mitarbeiter"> Mitarbeiter / a>
   •          ul>
   •             li> a href = "/ borsato"> Marco Borsato / a> / li>
   •             li> a href = "/ titulaer"> Chriet Titulaer / a> / li>
   •          / ul>
   • / li>
   • li> a href = "#!"> Kontakt / a>
   •          ul>
   •             li> a href = "mailto: [email protected]"> Ein Problem melden / a> / li>
   •             li> a href = "/ support"> Kundensupport / a> / li>
   •          / ul>
   • / li>
   • / ul>
   • / nav>
   • / div>

Teil 2 von 2: Schreiben des CSS

1. Öffnen Sie Ihr CSS-Stylesheet. Veröffentlichen Sie einen Link zu Ihrem CSS-Stylesheet im Kopfbereich Ihres HTML-Dokuments, falls der Link noch nicht vorhanden ist. In diesem Artikel werden die Grundlagen von CSS, wie das Festlegen einer Schriftart und einer Hintergrundfarbe, nicht behandelt.
2. Clearfix-Code hinzufügen. Erinnern Sie sich, die Klasse "clearfix" zur Menüliste hinzugefügt zu haben? Normalerweise haben die Elemente des Dropdown-Menüs einen transparenten Hintergrund, auf dem andere Elemente verschoben werden können. Eine einfache Anpassung an das CSS kann dieses Problem lösen. Hier ist eine nette, schnelle Lösung, obwohl sie in Internet Explorer 7 und früheren Versionen nicht funktioniert:
   • .clearfix: nach {
   • Inhalt: "";
   • Anzeige: Tabelle;
   • }
3. Erstellen Sie das grundlegende Design. Mit diesem Code können Sie Ihr Menü oben auf der Seite platzieren und die Dropdown-Elemente ausblenden. Dies ist absichtlich sehr einfach, damit wir uns auf den relevanten Code konzentrieren können. Sie können es später mit zusätzlichem CSS-Code wie Auffüllen und Rand ändern.
   • .nav-wrapper {
   • Breite: 100%;
   • Hintergrund: # 008B8B;
   • }
   •  
   • .nav Menü {
   • Position: relativ;
   • Anzeige: Inline-Block;
   • }
   •  
   • Untermenü {
   • Position: absolut;
   • Anzeige: keine;
   • Hintergrund: # 555;
   • }
4. Lassen Sie die Dropdown-Elemente angezeigt werden, wenn Sie mit der Maus darüber fahren. Die Elemente in der Dropdown-Liste sind jetzt so eingestellt, dass sie nicht angezeigt werden. So erstellen Sie eine vollständige Unterliste, sobald Sie mit der Maus über das "übergeordnete Element" fahren:
   • .nav-menu ul li: hover> ul {
   • Bildschirmsperre;
   • }
   • Hinweis - Wenn zusätzliche Menüs in den Menüelementen des Dropdown-Menüs ausgeblendet sind, gelten die hier hinzugefügten Eigenschaften für alle Menüs. Wenn Sie möchten, dass der Stil nur auf die erste Ebene der Dropdown-Menüs angewendet wird, verwenden Sie stattdessen ".nav-menu> ul".
5. Zeigen Sie mit einem Pfeil an, dass ein Dropdown-Menü vorhanden ist. 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:
   • .nav menu> ul> li: after {
   • Inhalt: " 25BC"; / * Unicode für den Abwärtspfeil entkommen * /
   • Schriftgröße: .5em;
   • Bildschirmsperre;
   • Position: absolut;
   •    }
   • Hinweis - Passen Sie die Position des Pfeils mit den Eigenschaften oben, unten, rechts oder links an.
   • Hinweis - Wenn nicht alle Menüelemente Dropdowns enthalten, ändern Sie nicht das Erscheinungsbild des gesamten Klassennavigationsmenüs. Fügen Sie stattdessen jedem li-Element, in dem Sie einen Pfeil möchten, eine weitere Klasse (z. B. Dropdown) hinzu. Beziehen Sie sich auf diese Klasse im obigen Code.
6. Passen Sie die Auffüllung, den Hintergrund und andere Eigenschaften an. Das Menü sollte jetzt funktionieren, aber es ist noch nicht sehr schön. Mit den Eigenschaften in CSS 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 select> sehr einfach.
• Der Link a href = "#"> scrollt zum Anfang der Seite, und ein Link, der auf einen nicht vorhandenen Anker verweist, z. B. ein href = "#!">, Scrollt nicht. Wenn sich das zu schlampig anfühlt, können Sie das Aussehen des Cursors mit CSS ändern.
• Entfernen Sie beim Kopieren und Einfügen des Beispielcodes alle Aufzählungszeichen.