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
Geef jouw antwoord
0 / 2500
Geef Antwoord

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.
9 jaar geleden
Deel jouw antwoord
0 / 2500
Geef Antwoord
logo van Kompas Publishing

GoeieVraag.nl is onderdeel van Kompas Publishing