Hét vraag- en antwoordplatform van Nederland

Hoe maak ik een dropdown list in css/html (zoals in voorbeeld)?

Het knmi heeft sinds kort een nieuwe website online, daarin zit een element dat ik graag op mijn website zou gebruiken. Het is een dropdown menu gemaakt met een list (ul li). Het lukt me nog wel om een dropdown menu te maken, maar dat ziet er erg 1995 uit, ik wil het in de html5 look.
Het menu wat ik bedoel lijkt in het kaartje van Nederland te staan, onderaan, op http://www.knmi.nl/nederland-nu/weer/verwachtingen. In de bijlage heb ik een screenshot van het dropdownmenu dat ik bedoel Daar waar "donderdag overdag" staat is het menuutje wat ik bedoel.
Ik heb in de html en css van het knmi zitten neuzen, maar daar kom ik er niet uit. Wie weet hoe ik zoiets redelijk eenvoudig kan maken in html5 en css3?

Verwijderde gebruiker
9 jaar geleden

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Geef jouw antwoord

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

/
Geef Antwoord
+
Selected image

Het beste antwoord

Wat ze bij het KNMI hebben gedaan, is het volgende trucje:
Ze hebben gewoon een '1995'-select list gemaakt.
Tevens maken ze een DIV (bij hen is de class="select__wrp").
Deze DIV bevat de teskt Vrijdag overdag
Verder hebben ze daar overheen de normale selectlist staan, maar dan met opacity: 0;. Onzichtbaar dus. Maar hij is er wel, en hij werkt ook.
Als je dan een andere keuze maakt, wordt er dmv jquery de tekst in de DIV vervangen door de gekozen waarde.
(Lees meer...)
9 jaar geleden
rose
9 jaar geleden
Wat ik dan weer niet snap: als ze aan de .select__dropdown class in css het volgende toevoegen: padding: 10px 35px 10px 11px;
font-family: "Sans", Arial, sans-serif;
font-size: 18px;
line-height: 1.5; ziet het er veel netter uit...
Deel jouw antwoord

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

/
Geef Antwoord
+
Selected image