Opdrachten week 5
Wat staat er deze week op het menu? Onze specialiteiten zijn:
Voorgerecht
We beginnen simpel met een verticaal menuutje met linkjes naar verschillende pagina's. In de screenshot zie je naar welke pagina's er moet worden gelinkt. Je hoeft deze pagina's niet nog eens apart te maken.
Zorg er ook voor dat het hele knopje klikbaar is, niet alleen de tekst. Daarnaast moet het knopje ook met een lichtere kleur oplichten als de gebruiker er met zijn muis overheen hovert.
Maak in de HTML alleen gebruik van ul, li en a elementen. Alle styling moet je dus met CSS doen.
Hoofdgerecht
Breid het menu uit door het horizontaal bovenaan de pagina te plaatsen en een extra submenu te maken bij de roosterpagina. Dit submenu is alleen zichtbaar als je met de muis boven de roosterknop hovert (of met de muis over het submenu zelf heen hovert natuurlijk).
Zorg er ook weer voor dat de knopjes oplichten met een andere kleur. En dat het rooster menu item opgelicht blijft als je met de muis in het submenu bent.
Let heel goed op waar je de ul van het submenu plaatst!
Toetje
Om het menu naar rechts te laten uitklappen is alweer een stukje moeilijker. Probeer het menu in de screenshot na te maken. Uiteraard verschijnt het submenu alleen als je met je muis over het menu item heen gaat.
Je hoeft voor deze opdracht alleen de CSS aan te passen, de HTML is precies hetzelfde als bij de vorige opgave.
Koffie
Breid de vorige opgave uit met subsubmenu's. Die klappen pas uit als je met de muis over een item in het submenu heen hovert.
Zorg er ook voor dat elk submenu met een korte transitie tevoorschijn komt.