sprint 3 ‐ week 1 ‐ dinsdag 15 oktober 2024 - julia-stevens/i-love-web GitHub Wiki

Dit heb gedaan:

Workshop positioning gevolgd:

Deze tutorial kan ik goed gebruiken voor mijn project. Ik heb namelijk een muziek player onderaan het scherm en hierop komt een knop, zodat je als gebruik een menu naar boven kunt uitklappen, zie afbeelding

In deze tutorial heb ik geleerd hoe ik dit kan maken:

  • ul met menu items moeten een fixed zijn & een top, left, right en/of bottom
  • button moet een absolute positie hebben
  • met transition de hele nav uit beeld positioneren (bv translate: 0 -100%;)
  • met sticky of fixed de header op een vaste plek zetten

in JS:

  • gebruik querySelector om het menu in een variabele op te slaan
  • addEventListener gebruik je om de klik van de gebruiker te registeren & een functie aan te roepen
  • de aangeroepen functie toonMenu toggled de class toonMenu --> deze class verwijst naar CSS waarin de position van de nav weer in beeld wordt gepositioneerd
  • en onderstaande code kun je gebruiken om de hamburger te veranderen in een kruis:
nav.toonMenu button img {
  /* JOUW CODE HIER - stap 6 */
  /* url kruisje: https://assets.codepen.io/274456/ui-icon-cross.svg */
  content: url(https://assets.codepen.io/274456/ui-icon-cross.svg);
  
}

Opnieuw code geschreven voor project Triple Commits: