På denne side skal du lave en responsiv menu med en undermenu.
Ligesom til den forrige opgave er den grundlæggende kode og styling lavet til dig. Al styling til menuen i desktopversionen er også lavet færdig. Det er den styling, der slår igennem i media query'en @media only screen and (min-width: 768px). Du skal lave mobil menuen.
I menuen er der nu tilføjet undermenupunkter til de tre menupunkter.
Vær opmærksom på, at de menupunkterne i de øverste menupunkter her er ændret til h2'ere.
"Checkbox tricket" kan også bruges til undermenuer
I denne mobilmenu med undermenuer anvendes et pil ned ikon, som skal placeres bag en skjult checkbox på samme måde, som den dit hamburger ikon også blev placeret bag en skjult checkbox i den første opgave.
Både billedet af pilen og checkboxen er lagt ind i din menu i HTML-koden. Du skal i denne opgave selv placere både billedet af pilen og checkboxen i din mobilmenu. Pil og checkbox skal placeres efter menupunktet, så der kommer til at stå MENUPUNKT 1 ▼
Ligesom i den første opgave, kan du også bruge CSS pseudo-selectoren :checked til styling af undermenuen, når den bliver åbnet.
Så hvis du styler på nav .menu-btn:checked ~ul li .submenu-btn:checked ~ul, så styler du på den undermenu, som skal åbnes, når man klikker på pil ned ikonet.
Når du åbner siden i din browser, så tjek sidens responsivitet ved at trække vinduet bredere og smallere. På siden her er der sat et responsivt breakpoint ved 768px. Pas på med at bruge den responsive visning, som findes i "inspicer"/"udviklerværktøjet" - de kan godt give en forkert visning.
Hvis du har brug for mere hjælp til at løse opgaven, så spørg Hanne!