Wie erstelle ich Dropdown-CSS-Menüs?
Cascading Style Sheets (CSS) ist ein Name, der die Formatierung eines HTML-Dokuments (Hyper Text Markup Language) oder XML-Dokuments (Extensible Markup Language) beschreibt. Es kann für alle Arten von XML-Dokumenten verwendet werden, wird jedoch am häufigsten für in HTML geschriebene Webseiten verwendet. Mit CSS können Dropdown-Menüs auf Webseiten erstellt werden. In Dropdown-CSS-Menüs wird ein einzelnes Textelement angezeigt, bis der Besucher mit der Maus über das Menü fährt. An diesem Punkt wird die gesamte Liste der Elemente angezeigt. Das Menü wird mithilfe der CSS-Identifikations- und Klassen-Tags erstellt.
Dropdown-CSS-Menüs beginnen mit dem ID-Selektor. Dieser Selektor sieht aus wie #. Es folgt der Name der ID. Sie können die ID beliebig benennen, sie sollte jedoch beschreibend sein, damit andere Ihren Code lesen können. In einem Dropdown-Menü kann beispielsweise der Code # drop1 verwendet werden.
Erstellen Sie die Klasse für das erste Element im Dropdown-CSS-Menü mithilfe der Klassenauswahl, die wie ein Punkt aussieht. Die Klasse ist Teil des HTML-Listenelements. Das Listenelement ist durch die Zeichen "li" gekennzeichnet. Erstellen Sie die Klasse der obersten Ebene, indem Sie "li.top" eingeben. Die Klassenbeschreibung befindet sich zwischen zwei geschweiften Klammern.
Das folgende Beispiel zeigt den gesamten CSS-Code für das erste Element in der Liste:
# drop1 li.top {Schriftfamilie: Verdana, Geneva, San-Serif;
Schriftgröße: 100%;
Farbe: # FF00FF;}
Erstellen Sie als Nächstes eine Klasse für die Elemente, die unter dem ersten Element im CSS-Menü ausgeblendet werden. Die Klasse beschreibt die ungeordnete HTML-Liste, die mit den Zeichen "ul" gekennzeichnet ist. Die Beschreibung entspricht im Wesentlichen dem Menüelement der obersten Ebene mit dem Zusatz "display: none # 59" am Anfang der Beschreibung. Dies zeigt an, dass die Elemente in der ungeordneten Liste ausgeblendet werden, bis sich der Zeiger über dem Dropdown-CSS-Menü befindet.
Das Folgende ist ein Beispiel für diesen Teil des CSS-Codes:
# drop1 ul.link {
Anzeige: keine # 59
Schriftfamilie: Verdana, Geneva, San-Serif;
Schriftgröße: 100%;
Farbe: # FF00FF;}
Sie möchten, dass das Dropdown-CSS-Menü über dem Rest des HMTL-Dokuments angezeigt wird. Wenn der Besucher mit der Maus über das Menü fährt, wird der Rest des Dokuments über die Seite verschoben, um Platz für die Liste zu schaffen. Wenn Sie das Positionselement auf absolut setzen, wird dies ausgeführt.
Der Code zum Festlegen der Position lautet:
# drop1 {position: absolute;}
Das ist alles, was für den CSS-Teil des Dropdown-Menüs benötigt wird. Der Rest des Dropdown-CSS-Menüs wird im HTML-Dokument mit den Elementen "div", "id", "class", "li" und "ul" erstellt. Das "div" -Tag trennt den Menüabschnitt des Dokuments. Geben Sie <div id = "drop1"> ein, um den Dropdown-Menüabschnitt zu erstellen. Starten Sie dann die ungeordnete Liste mit dem HTML-Element "ul".
Fügen Sie die Top-Klasse zum ersten Listenelement und die Link-Klasse für den Rest der Elemente hinzu. Der HTML-Code sollte ungefähr so aussehen:
<div id = "drop1">
<li class = "top"> Top-Artikel </ li>
<li class = "link"> <a href="#"> Artikel </a> </ li>
<li class = "link"> <a href="#"> Artikel </a> </ li>
<li class = "link"> <a href="#"> Artikel </a> </ li>
</ ul> </ div>
Wenn Sie das Dokument in einem Webbrowser öffnen, wird das Dropdown-CSS-Menü als einzelnes Element auf der Seite angezeigt. Wenn Sie mit der Maus über das oberste Element fahren, wird der Rest des Menüs angezeigt. Der Rest des Texts auf der Seite wird nicht verschoben, aber ein Teil wird vom Menü ausgeblendet.