Web: Dropdown Menü mit mehreren Farben?
Ich würde gerne ein erweiterbares Dropdown Menü erstellen, wobei der erste, dritte, fünfte (usw.) Stichpunkt z.B. die Hintergrundfarbe rot hat und der zweite, vierte, sechste (usw.) die z.B. Hintergrundfarbe weiss hat. Das ganze soll zudem erweiterbar sein, sodass von alleine erkannt wird, welche Hintergrundfarbe ein ergänzter Punkt haben soll. Ich habe jedoch keine Ahnung wie ich das umsetzen kann. Kennt sich jemand aus?
2 Antworten
Du kannst das mit dem CSS Pseudo-Selektor ":nth-child()" machen. Hier ein kleines Beispiel dafür, wie das geht:
https://jsbin.com/nuxucalawa/2/edit?html,css,output
<div class="dropdown">
<div class="eintrag">irgendwas</div>
<div class="eintrag">irgendwas</div>
<div class="eintrag">irgendwas</div>
<div class="eintrag">irgendwas</div>
<div class="eintrag">irgendwas</div>
<div class="eintrag">irgendwas</div>
<div class="eintrag">irgendwas</div>
<div class="eintrag">irgendwas</div>
<div class="eintrag">irgendwas</div>
</div>
.dropdown {
overflow: hidden;
display: inline-block;
font-size: 1em;
line-height: 1.2em;
max-height: 1.2em;
transition: all linear 200ms;
}
.dropdown:hover {
/* irgendein Wert größer als die normale Höhe */
max-height: 300px;
}
/* anstatt 2n+1 kannst du auch odd schreiben */
.dropdown .eintrag:nth-child(2n+1) {
background-color: white;
}
/* anstatt 2n kannst du auch even schreiben */
.dropdown .eintrag:nth-child(2n) {
background-color: red;
}
Mit dem Wert in den Klammern kannst du genau sagen, welcher Knoten gemeint ist. Hier ein paar Sachen zum Verständnis wie er funktioniert:
:nth-child(1) /* nur erstes Element */
:nth-child(n) /* jedes Element */
:nth-child(n+1) /* jedes Element außer dem ersten */
:nth-child(2n) /* jedes zweite Element */
:nth-child(3n) /* jedes dritte Element */
CSS:
li:nth-child(even){
background-color: white;
}
li:nth-child(odd){
background-color: red;
}
li ist der selektor der elemente, den kann man durch alles mögliche ersetzen