[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

Programme von Machern für Macher

Die Grammiweb-Produktreihe hält viele praktische Tools für Webdesigner bereit

Hier klicken und mehr erfahren

[an error occurred while processing this directive]

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