Lektion 16 Menubarer

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

dropdown menu

Ø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.

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

Right-align links

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 nav bar

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.