Labbar vecka 5d - Webbteknik 1

I denna laboration ska du i ett antal delar se på hur navigeringen kommer in i grid och kan utformas med bl.a. flex. Vi börjar med de grundläggande delarna i några övningar, där du först gör en grund för layout och navigering. Sedan gör du förändringar i ett par media queries. Slutligen får du experimentera själv med andra exempel på hur navigering kan utformas.

Förberedelser

Öppna mappen L5d-0 (som finns i L5d) i Visual Studio Code (VSC).
Öppna filerna index.html och style.css i VSC och öppna sidan i Live Server.
Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den. Det finns också flera HTML-filer, men alla är strukturerade på samma sätt. Se speciellt att navigeringslänkarna ligger i en ul-lista i nav-elementet.

Layout och placering av navigeringen

Lägg in följande kod i regeln för body.

display: grid;
grid-template-columns: auto 180px minmax(auto,820px) auto;
grid-template-rows: min-content auto min-content;
grid-template-areas:
    "header header header header"
    ".      nav    main   ."
    "footer footer footer footer";

De olika elementen som ingår i layouten är redan namngivna med grid-area i regler för header, main, footer och nav.
Med denna kod skapas en layout med navigeringen i en kolumn till vänster. Bredden för nav ska vara 180px, medan bredden för main är flexibel med en maximal bredd på 820px.

Innehållet i nav

I början av nav-elementet finns ett label- och input-element. Dessa ska senare användas i en media query, men ska nu döljas. Lägg till en regel för #menuicon, #menucheckbox med display: none;
Lägg till display: flex; i regeln för nav ul
Lägg också in flex-direction: column; så att det blir en kolumn igen.
- Det var ju redan en kolumn även utan flex, men vi kan nu lätt ändra till en rad, då vi senare i en media query förändrar layouten. Vi kan också använda andra "flex-egenskaper" för ytterligare utformning av navigeringen.
Lägg till gap: 1em; för att få lite avstånd mellan länkarna.
Eftersom flex ligger i ul-elementet, är det li-elementen som är flexboxarna. Ta fram Inspektören i Firefox och peka på li-elementen i koden. Observera att de är block-element, så de täcker hela bredden inom nav.
- Vi har inget behov av någon ytterligare stilsättning av li-elementen nu, utan ska istället gå vidare med länkarna som finns i dem.

Länkarna

Lägg till en regel för nav a:hover med background-color: #20985a; och color: #e3eed7;
- Testa att föra muspekaren över länkarna på webbsidan, så att du ser att färgen ändras.
  - Stäng först konsolen med Inspektören, ifall du fortfarande har den öppen.
I HTML-filerna är länken för aktuell sida markerad med ett class-attribut med namnet "thisPage". Lägg in en regel i CSS-koden för nav a.thisPage med background-color: #1e39d0; och color: #ffffff;
- Testa att klicka på länkarna i webbläsaren.
Lägg till display: block; i regeln för nav a och testa i webbläsaren.
- Ett a-element är normalt ett inline-element, så det är inte bredare än dess textinnehåll. Genom att ändra till block-element fyller länkarna nu hela bredden och blir därmed lika breda.

Media query för att flytta navigeringen

Lägg in följande media query i slutet av CSS-filen:

@media screen and (max-width: 740px) {
  body {
    grid-template-columns: auto;
    grid-template-rows: min-content min-content auto min-content;
    grid-template-areas:
    "nav"
    "header"
    "main"
    "footer";
  }
  nav ul {
    flex-direction: row;
  }
}

Ta fram Följsamt designläge och dra ner bredden till under 740px, för att se hur layouten förändras.
- Layouten är omgjord till en kolumn med navigeringen högst upp. Eftersom flex används behöver vi endast ändra flex-direction, för att få det till en rad.
Lägg till justify-content: flex-end; i regeln för nav ul, ifall du vill ha länkarna till höger.
- Prova gärna med andra värden på justify-content.

Media query för att ändra navigeringen till en meny

Du ska nu lägga in kod så att navigeringsmenyn kan visas eller döljas, genomklick på en s.k. "hamburgerikon". Lägg först in följande media query. Ta sedan fram Följsamt designläge, dra ner bredden på fönstret och testa menyn. Läs därefter beskrivningen under koden nedan.

Lägg in följande:

@media screen and (max-width: 400px) {
  #menuicon {
    background-image: url(../img/menuicon.png);
    width: 24px;
    height: 24px;
    display: inline-block;
    cursor: pointer;
  }
  #menucheckbox ~ ul {
    display: none;
  }
  #menucheckbox:checked ~ ul {
    display: flex;
  }
  nav ul {
    flex-direction: column;
    gap: 0;
  }
}

Beskrivning av koden:
- HTML-koden
  - En input-tagg som är en "kryssruta" (checkbox) kan vara ibockad eller ej. Den kan alltså ha två lägen och det går i CSS införa regler för dessa. så att vi kan sätta olika stil. Det ska användas för att visa eller dölja menyn.
  - För att visa en bild istället för "kryssrutan" finns också ett label-element, som kopplas till input-taggen via for- och id-attributen med samma namn (menucheckbox). Bilden läggs in som en bakgrundsbild i CSS-koden, se nedan.
- CSS-koden
  - Visa ikonen
    - Bilden läggs in som en bakgrundsbild. Storleken på elementet sätts också till samma storlek som bilden, så att bilden syns. Eftersom label-elementet inte har något innehåll i HTML-koden, skulle det annars inte ha någon storlek och därmed inte visas.
    - Tidigare doldes label- och input-elementen med display: none. Nu visas label-elementet med display: inline-block; så bilden visas. Kryssrutan ska inte visas, så input-elementet ska fortfarande vara dolt.
    - Muspekaren (cursor) ändras, då den förs in över bilden, så att användaren ser att man kan klicka.
  - Visa/dölj menyn
    - Med regeln #menucheckbox ~ ul refererar man till ul-element som ligger efter elementet med id="menucheckbox" (dvs input-elementet). Denna regel gäller då kryssrutan inte är ibockad och då ska ul-listan med länkarna vara dold.
    - Regeln #menucheckbox:checked ~ ul gäller då kryssrutan är ibockad och då ska ul-listan visas.
  - Stil för menyn
    - I regeln för nav ul ändras ul-listan till en kolumn.
    - Avståndet mellan länkarna, som tidigare infördes, tas nu bort.

Fler exempel på utformning av navigeringen

I mappen L5d finns ytterligare ett antal mappar med exempel på hur navigeringen kan utformas. Öppna mapparna själv och studera koden samt experimentera med den.

Klar

Detta var den sista delen av laboration 5. Titta nu på veckans exempel. Fortsätt sedan med Uppgift 2.

Webbteknik 1

Laboration 5D

Navigering