OPGAVER TIL HTML & CSS – JS – MENU KNAPPER
Opgave 2
Opgave 2 – Del 1
- Lav en ny pen i codepen.io
- Gå op i HTML boksen og skriv dette ind:
OBS! På linje 3 er der gjort plads til alle farve linjerne inde i “container-nr1”. Dem sætter vi ind i næste del opgave.
Opgave 2 – Del 2
Vi går nu ned i vores CSS og beskriver vores klasser for buttons-changing
Opgave 2 – Del 3
Nu skal vi tilbage til HTML‘en. For vi skal lige have resten af vores knapper med ind. Så kopier denne del der står på billedet og sæt det ind lige under(på linje 6). Gør dette et par gange så du har 5 knapper og ændre nu på tallene på id’erne(knap-1 og nr1) og for(for=nr1) og på knapperne.
Opgave 2 – Del 4
Nu skal vi tilbage til vores CSS boks og skrive klassen ind for buttons-link som gælder for alle knapperne.
Opgave 2 – Del 5
Vi bliver i CSS boksen. og tager nu fat på hvad der sker når man holder musen over knapperne(hover over dem).
Opgave 2 – Del 6
Vi bliver stadig i CSS’en og går nu i gang med at beskrive hvad der sker når knappen er active(trykket på). Denne klasse kalder vi på i JS delen når der lyttes på tryk af knapper.
Opgave 2 – Del 7
Nu skal vi have placeret knapperne, så de ikke ligger oven på hinanden og enderne på menuen bliver buet.
Opgave 2 – Del 8
Nu er vi nået til den allersidste del i CSS’en! Nemlig knap teksten og skjule alle radio knapperne.
Opgave 2 – Del 9
Nu er vi nået til JS delen! Den allersidste del i opgaven
