[an error occurred while processing this directive]

Schnelle Seiten gefällig?

Befreien Sie Ihre Webseiten mit wenigen Mausklicks von unnötigem Balast

Hier klicken und mehr erfahren

Formulare ganz einfach erstellen

Onlineformulare mit wenigen Mausklicks einfach und bequem selbst gemacht

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

(Stand: 29.11.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: 29.11.2021
Seitenanfang - Sponsor werden - Datenschutz - Medien - Impressum - Werbung - Hilfe - Kontakt