Forberedelse
- Genlæs afsnit 8.7 og 8.8 om menuer i lærebogen
Formål
- Kikke på W3schools eksempler og prøve at ændre dem lidt
- Lære om <div> tags gennem menuer
- Lære at lave en drop-down menu
Fælles gennemgang
Fra sidst
- Hvad er et <div> tag
- Nævn nogle nyttige egenskaber ved et <div> tag
- Hvordan kan vi skrue et menu sammen
Lektien til denne gang
- Runde menuer af
- En vandret menu
- En lodret menu
- Vandret menu med fald-ned undermenuer
- Gennemgang:
- Det simple menu i øvelse 1 samt noget styling af det. https://www.w3schools.com/css/css_navbar.asp
- Vis et pseudo-link


Øvelser
I må gerne arbejde 2 og 2 i øvelserne her. Inden du går i gang: Du kan finde det meste information på https://www.w3schools.com/css/css_navbar.asp samt de 2 underliggende sider om hhv. lodrette og vandrette menuer.
Start også med at lave en sitemappe til dine menuer.
Alternativ gennemgang:
- Lav 16.1 og 16.2 sammen og på klassen. Hav tændte computere
- Øvelse 16.3, 16.4, 16.5 og 17.2 skal I kunne gennemgå ved tavlen for resten af klassen. I skal kunne forklare, hvordan de virker, og I skal kunne lave lette manipulationer. F.eks. skifte baggrundsfarve, skifte farve på links. Dvs. I skal forstå CSS koden. I må gerne forklare ud fra W3 schools eksempler, men I skal være godt inde i koden. Dvs. prøv at lege med koden.
16.1 Lodret menu 1
Kopier koden fra W3schools over https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical i et html-dokument, f.eks. menu1.html, og gem filen.
- Hvorfor er det nyttigt at have menuen som en liste
- Hvordan fjerner man prikken foran <li>
- Få en anden baggrundsfarve til <li>, f.eks. mørkeblå
- Få en anden farve til link’sne, f.eks. hvid (KSDH)
- Lav noget mere plads omkring <li> tagget og sæt noget kant på. Tip: Brug box modellen med margin, border og padding
- Fjern understregningen af link’sne
- Når man ruller musen over linket, skal der komme en understregning
16.2 Lodret menu 2
Studer eksemplet hos W3schools her: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_active, kopier koden over i et nyt html dokument og gem det i din sitemappe.
- Hvad har de gjort for at få det lavet pænt
- Hvad laver klassen “active”
- Lav om på farverne, så baggrunden bliver rød, skriften hvid og når linket er aktivt, skal baggrunden være orange
- Hvorfor er disse farver ikke verdens bedste måde at farvelægge en menu på
- Ekstra: Fjern understregningen undtagen når musen ruller over linket (hover)
16.3 Lodret menu 3. Menu til en mobiltelefon
Menuen herunder er ret typisk for visninger af sider på en mobiltelefon.

- Kik i eksemplet her https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_borders og find ud af, hvordan man kan lave det
- Tag en kopi af din opgave 16.2. Prøv at lave det samme med menuen.
16.4 Vandret menu med et twist
Læs løs hos W3schools her: https://www.w3schools.com/css/css_navbar_horizontal.asp, nærmere bestemt menubaren nedenunder. Læs indtil du finder menubaren her

Koden er her: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_right.
- Hvordan får listen til at blive vandret
- Hvordan får de menupunktet til at være helt ude til højre
- Ændr farven, så baggrundsfarven på baren bliver orange
- Lav et nyt menupunkt yderst til højre, der hedder “In Danish”. Vi forestiller os, at siden også har en dansk udgave
- Hvis du er dygtig: Sæt et lille dansk flag ind i stedet for teksten, men det skal stadig være klikbart
- Sæt et punkt ind efter “News” der hedder “Products”
16.5 Fixed og sticky menu
Gå ind hos W3schools: https://www.w3schools.com/css/css_navbar_horizontal.asp. Find eksemplet her:
- Fixed Navigation Bar top: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_fixed
- Fixed Navigation Bar bottom: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black_fixed2
- Sticky Navbar: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_sticky
- Hvad kan det
- Hvordan fungerer det med koden bag. Forklar det vigtigste

For alle 3 gælder det. Kik i koden og prøv at se, hvordan de har gjort.

16.6 Prøv selv
Tag en kopi af din wrapper, og indsæt kopi af dropdown menuen fra sidste opgave, sæt den ind i din wrapper og få den til at virke. Menuen skal placeres i <header> tagget fra opgave 14. Prøv at style den og resten af siden.
Hvis du har tid til overs, så leg med stylingen både i menuen og på resten af wrapperen.