[an error occurred while processing this directive]

Verwalten Sie Ihre Webfarben

Behalten Sie mit MyColor Studio den Überblick über Ihre Onlineprojekte

Hier klicken und mehr erfahren

Finden Sie harmonische Farben

Mit MyColor Studio, dem professionellen Farbmanagement für Ihre Webseite

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 08.03.21, Adresse: http://www.grammiweb.de/html/html028.shtml)

 

Dropdown-Menüs in Farbe

CSS bietet die Möglichkeit, die doch recht langweilig gestalteten Dropdown-Menüs ein wenig farbiger zu gestalten. Dies erhöht gerade bei längeren Listen die Übersichtlichkeit und ermöglicht eine perfekte Anpassung ans eigene Layout.

Beispiel:

Binden Sie einfach folgenden Text in den Kopfbereich (zwischen <HEAD> und </HEAD>) der Seite ein:

<style>
select.Menue{
font-family: Arial;
font-size: 10pt;
font-style: normal;
font-weight: bold;
}
option.Menue0{
color:#FFFFFF;
background-color:#3E7CBB;

}
option.Menue1{
color:#FFFFFF;
background-color:#6597C9;

}
option.Menue2{
color:#FFFFFF;
background-color:#8CB1D6;

}
option.Menue3{
color:#336699;
background-color:#DCE8F1;

}
</style>

Dabei können Sie die rot markierten Parameter Ihren Wünschen entsprechend verändern. Natürlich können Sie auch Neue hinzufügen. Eine Liste der wichtigsten CSS-Funktionen finden Sie in unserer CSS-Übersicht.

Das eigentlich Menü binden Sie mit folgendem Text in den BODY-Bereich des Dokuments ein (zwischen <BODY> und </BODY>):

<form><p><select class="Menue" size="1">
<option class="Menue0">Bitte wählen Sie</option>
<option class="Menue1">Eintrag</option>
<option class="Menue1">Eintrag</option>
<option class="Menue2">Eintrag</option>
<option class="Menue2">Eintrag</option>
<option class="Menue3">Eintrag</option>
<option class="Menue3">Eintrag</option>
</select></p></form>

Hierbei können Sie jeden einzelnen Eintrag mit den Formatierungen versehen, die Sie in obigem Script gewählt haben (Menue0 bis Menue3).


Zurück zum Inhaltsverzeichnis

[an error occurred while processing this directive] [an error occurred while processing this directive]

© Grammiweb.de Internetlösungen. Alle Rechte vorbehalten. Stand: 08.03.2021
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt