I denna laboration ska rutor (div- eller span-element) visas och döljas på olika sätt. Interaktionen kommer vara på lite olika sätt och vi ska se hur vi kan hantera det med hjälp av CSS.
I exemplen används huvudsakligen visibility för att visa och dölja. Elementen är placerade med absolut positionering inom ett annat element med relativ positionerning. De rutor som visas hamnar då framför övrigt innahåll på sidan. Man kan också ta bort denna positionering och istället använda display med värdena block och none, för att visa och dölja, om man vill att rutorna ska visas som en del av övrigt innehåll på sidan.
30 min.
Förberedelser
- Öppna mappen L9b i Visual Studio Code (VSC).
- Öppna filen index.html och style.css i VSC samt öppna sidan i Live Server.
- Studera den kod som finns i HTML- och CSS-filerna, så att du blir insatt i den.
- Du kommer sedan göra tillägg i CSS-koden, för att skapa interaktiviteten.
1 :hover
- Lägg till en regel för
#one li divmedvisibility: hidden; - Lägg till ytterligare en regel för
#one li:hover divmedvisibility: visible; - Prova i webbläsaren, genom att föra muspekaren över orden HTML och CSS i den första listan.
2 :active
- Lägg till en regel för
#two li divmedvisibility: hidden; - Lägg till ytterligare en regel för
#two li:active divmedvisibility: visible; - Prova i webbläsaren, genom att klicka på orden HTML och CSS i den andra listan.
- Rutan dyker upp och visas, så länge man håller musknappen nere.
- Om man rubbar lite på musen, kan man råka markera den text man pekar på. För att förhindra det kan följande CSS-kod läggas till:
- En regel för
#twomeduser-select: none;
- En regel för
3 :checked
- Studera HTML-koden för den tredje listan och notera att det nu finns ett
label-element med texten man ska klicka på och eninput-tagg för"checkbox". Observera också attinput-taggen ligger som ett "syskon" förediv-elementet som ska visas/döljas. - I CSS-koden lägger du in en regel för
#three li inputmed display: none;- Detta gör att kryssrutorna döljs, men de kan fortfarande markeras, då man klickar på texten i
label-elementen.
- Detta gör att kryssrutorna döljs, men de kan fortfarande markeras, då man klickar på texten i
- Lägg till en regel för
#three li divmedvisibility: hidden; - Lägg till ytterligare en regel för
#three li input:checked + divmedvisibility: visible; - Prova i webbläsaren, genom att klicka på orden HTML och CSS i listan.
- Rutorna visas/döljs omväxlande vid klick. Båda rutorna kan också vara synliga samtidigt.
- Detta är den teknik som vi redan använt, då vi skulle visa eller dölja navigeringsmenyn i laboration L5d.
4 :target
- Studera HTML-koden för den fjärde listan och notera att det nu finns länkar för de ord man ska klicka på. I länkarna refereras det till de id som finns i
div-elementen. - Lägg till en regel för
#four li divmedvisibility: hidden; - Lägg till ytterligare en regel för
#four li div:targetmedvisibility: visible; - Prova i webbläsaren, genom att klicka på orden HTML och CSS i listan.
- Då man klickar på en länk går webbläsaren till
div-elementet, som är destinationen, dvs målet (target) för länken. Detta känner vi av i CSS-koden och visar rutan. - Det kan endast vara ett element som är "target", så därför kan endast en ruta i taget visas. Men vill man dölja den sista, måste vi se till att "target" blir något annat och det görs med länken under listan.
- Tekniken fungerar inte så bra, om man scrollat i sidan, eftersom länken scrollar fram till det element som blir "target". Prova att göra fönstret mindre, scrolla ner till länkarna och klicka på dem.
- Då man klickar på en länk går webbläsaren till
5 :focus
- Studera HTML-koden. Det är nu en del av ett formulär med två textfält. Denna gång är det
span-elementen som ska visas/döljas. - Lägg till
visibility: hidden;i regeln för#five spani CSS-koden. - Lägg till en regel för
#five input:focusmedbackground-color: #8E8;(eller annan valfri färg). - Lägg också till en regel för
#five input:focus + spanmedvisibility: visible; - Prova i webbläsaren, genom att klicka i textfälten.
- Bakgrundsfärgen byts och texten till höger dyker upp, så länge fältet är i "fokus".
6 :focus
- Studera HTML-koden. Det är nu samma struktur som då vi använde "checkbox", fast i detta fall är det istället textfält.
- Lägg till en regel för
#six li inputmedmargin-left: -9999px;- Då hamnar textfälten långt till vänster och är inte synliga på sidan.
- Lägg till en regel för
#six li divmedvisibility: hidden; - Lägg till ytterligare en regel för
#six li input:focus + divmedvisibility: visible; - Prova i webbläsaren, genom att klicka på texterna HTML och CSS i listan.
- Klickar man på en text, hamnar motsvarande textfält i fokus och div-elementet visas.
- Endast ett fält i taget kan vara i fokus, så endast en ruta kan visas.
- Klickar man utanför listan, är inget fält i fokus, och därmed visas ingen ruta.
7 :checked — visa flera element, som specificeras av en class
- Studera HTML-koden och CSS-koden.
- Lägg till
display: none;i regeln för.answer - Lägg till en regel för
#seven input:checked ~ .answermeddisplay: block;- Med operatorn ~ blir refererar man till alla element med klassen "answer" som är sykon med
input-taggen och ligger efter den i HTML-koden.
- Med operatorn ~ blir refererar man till alla element med klassen "answer" som är sykon med
- Lägg också till en regel för
#seven input:checked + labelmedbackground-color: #8EC;- Vi kan på detta sätt referera till
label-elementet, eftersom det ligger efterinput-taggen i HTML-koden.
- Vi kan på detta sätt referera till
- Prova i webbläsaren, genom att klicka på "knappen".
- Denna teknik för att visa och dölja flera textrutor används i veckoplanen på kursens webbplats. Den används också på en del laborationssidor, för att visa(dölja lösningsförslag.
Klar
Detta var den sista delen av laboration L9. Titta nu på exemplet på sidan "Exempel" i navigeringen högst upp på sidan. Därefeter går du vidare med föreläsning F9c-F9d.