Accentsconagua
Share
Välkommen till nästa i vår serie av handledning där vi använder den allmänna syskonkombinationen ~ att skapa olika komponenter för webben. Denna handledning kommer att omfatta navigationselement med länkar och radioingångar.
Förutom CSS selectors, den kommer att ändras egendom och ingångstillstånd från den tidigare handledningen täcker vi också en gränshack, Sass för loopar, calc (), och tillgänglighet!
Här är den demo vi ska bygga:
En snabb ansvarsfriskrivning: Dessa CSS-effekter kan eller kanske inte fungerar i äldre webbläsare. Jag har testat dem i de senaste versionerna av Chrome, Firefox och Safari..
Jag använder Sass, en CSS preprocessor för att påskynda kodningsprocessen!
Jag använder också den fantastiska AutoPrefixer istället för leverantörs prefix. Om du använder CodePen, var noga med att gå till pennens inställningar, klicka på CSS och välj AutoPrefixer.
Den första versionen vi ska skapa är flikfältet som innehåller länkar. Detta är det enklaste och enkla att göra; Det är idealiskt för en allmän navigering som ska användas på flera olika webbsidor.
Vi börjar med en grundläggande element med fem länkar och en gräns. Du kan också använda ett annat behållarelement, men jag föredrar ett navigeringselement eftersom det här är syftet med detta utdrag. Gränsen tjänar till att visa vilken länk som svävar över eller väljas.
Jag lägger också in min navigering i en annan behållare, men det behöver du inte för grunduppsättningen!
Nästa steg är att skapa en visuell bas för flikarna. Behållaren bör vara relativt positionerad; Vi använder flexbox för att placera länkarna på en rad, men du kan också använda floats. Länkarna ska ta upp lika mycket utrymme och fylla hela behållarens bredd.
Den här delen kan vara knepig, så du borde justera den baserat på användningsfallet. Jag visste att jag behövde exakt fem länkar för den här demo, så jag kunde använda 5 som en Sass-variabel $ n för att beräkna den exakta bredden calc (100% / 5). Jag gjorde det eftersom jag ville kunna enkelt och snabbt ändra länknumret längst upp i mitt format, men du kan också använda en rak procentandel 20% om du föredrar att inte använda calc (), eller en fast bredd 160px om du inte vet hur många länkar du har.
Gränsen ska ha samma bredd som varje länk - vi använder samma bredd som vi använde för länkarna. Slutligen placerar vi det absolut längst ner till vänster på behållaren.
Nästa del använder den allmänna väljaren! Vi kommer att bli styling :sväva, :aktiva, och :fokus, samt en .aktiva klass om du vill använda JavaScript för att göra gränsen "stick" när du klickar på en länk.
Varje gång du sveper över en länk måste gränsen flytta till länkens position. Om varje länk är 160px, sedan svävar över den andra länken får gränsen att röra sig 160px till höger; svävar över den tredje länken bör leda till att gränsen flyttas 320 x till höger.
Med hjälp av denna information kan vi bygga en Sass for loop som beräknar numren automatiskt. Detta är ett direktiv som matar ut en uppsättning stilar ett visst antal gånger-i det här fallet skulle det mata ut denna transformationsstil $ n tider eller 5, som vi tidigare angav.
en @ för $ i från 1 till $ n & nth-barn (# $ i) & .aktiva ~ hr transform: translateX (# ($ i - 1) * 100%); :: sväva, &: fokusera, och: aktiv ~ hr, ~ .aktiv ~ hr transform: translateX (# ($ i - 1) * 100%);
$ i är numret som slingan är på för närvarande: 1, 2, 3, 4 eller 5. För att kunna använda det här numret inuti slingan måste vi fly den genom att sätta in det med ett pund tecken och häftiga hakparenteser # .
Om vi skulle använda fasta bredder skulle vi ersätta 100%, som flyttar gränsen med sin fulla bredd, med 160px eller hur breda länkarna måste vara. Om du slutar använda .aktiva, du måste använda specificera ~ .aktiv ~ hr som i exemplet ovan, eftersom annars kommer gränsen att hålla sig till det aktiva läget.
Du kan också göra det utan en för loop, men det är inte lika lätt att uppdatera eller justera. Den andra länken (a: n: te-barn (2)) rör sig translateX (100%), den fjärde länken rör sig translateX (300%), etc. Du måste ange en transformation för varje länk i din navigering.
Om du sveper över Sass-koden i exemplet ovan, a Visa kompilerade knappen ska visas i nedre högra hörnet som du kan klicka för att visa den sammanställda CSS. Det här är användbart för att se hur förbandet fungerar och hur du kan uppnå detsamma utan detta Sass-direktiv.
Slutligen lägger vi till några övergångar för att skapa gränsen "glidande" rörelse från länk till länk. Vi lägger till en långsammare övergång till själva gränsen när den återgår till standardpositionen och en snabbare övergång till gränsen på svävar så att den snäpper till rätt länk. Det sista steget är att lägga till några färgändringar till gränsen på svävar och på klicka!
Den här nästa versionen av den anpassade fliknavigeringen ser ut som den första men använder radioutgångar istället för länkar. Detta fungerar bra när du navigerar genom innehållsavsnitt på samma sida!
Huvudskillnaden i HTML är att vi nu behöver två element per flik: en etikett som visuellt representerar fliken och en radionånga för att lägga till funktionalitet.
Varje radionånga har samma namn så att val av en kommer att avmarkera de andra. Etiketterna motsvarar varje ingångs ID. Du kan också organisera dina radioingångar och etiketter så att motsvarande etiketter och ingångar ligger bredvid varandra om den strukturen är att föredra!
Styling för radion fliken nav är nästan exakt samma som länken fliken nav. Den enda skillnaden är att varje radionånga måste placeras absolut direkt ovanpå motsvarande etikett. Jag använde en Sass för loop för att undvika repetition, och användes också calc () för att undvika procentuella decimaler, såsom 16,6667%.
För transformationerna, istället för att ha en .aktiva klass, vi ska använda :kontrollerade. Detta tillstånd är användbart eftersom nu kommer gränsen "sticka" när du väljer en av radion!
Pil-flikarna är funktionellt desamma som radioflikarna; De skiljer sig endast visuellt. Denna version är bra för breadcrumb-stil eller steg-för-steg-innehåll. Du kan också använda länkar om du föredrar!
HTML-inställningen är densamma som radioinmatningsflikarna ovan. Om du vill använda länkar, blir det samma som länkflikarna.
Den största skillnaden i styling kommer från gränsen som rör sig på svävaren. I stället för en tunn linje längst ner tar gränsen istället hela navigeringshöjden. Den blir också placerad bakom ingångarna och etiketterna.
För att skapa spetsiga ändar använder vi en gränshack på hr: före och hr: efter. Varje pseudoelement kommer att ha en höjd och en bredd av 0, men en kantbredd som gör den så lång som förälderbehållaren. Detta skapar trianglar som vi kan anpassa individuellt för att skapa våra spetsiga ändar.
För den vänstra uppsättningen trianglar ska den vänstra gränsen vara vit medan de andra är färgade; För den högra uppsättningen trianglar ska den vänstra gränsen vara färgad medan de andra är vita. Vi ställer också de vänstra och högra gränserna för båda uppsättningarna för att vara tunnare än topp och botten så att kanterna ser kortare ut. Då placerar vi varje uppsättning på vänster och höger sida av hr.
Funktionen och animationen är exakt samma som radioingångarna, eller länkar om du använde dem istället.
Medan dessa navigeringselement fungerar bra från en synlig synpunkt kan någon som använder en skärmläsare eller som behöver andra former av tillgänglighet, ha svårt att läsa eller komma åt varje alternativ.
För att åtgärda några av dessa problem kan vi använda en kombination av roller, etiketter, dolda element och tabindexattribut, så att navigeringen läser ordentligt ur en tillgänglighetssynpunkt. Jag lär mig fortfarande mycket om tillgänglighet, men den här kombinationen verkar fungera bäst med denna navigationsstil.
Jag fokuserade huvudsakligen på att gömma element som inte är nödvändiga för skärmsläsare medan märkningselement som är viktiga för navets funktionalitet, t.ex. radioutgångar som inte innehåller text som standard som länkar gör. Prova vad som fungerar bäst för ditt användarfall!
Det finns dussintals olika sätt att utnyttja den allmänna syskonväljaren som är visuell, funktionell eller båda. Det ger ett kraftfullt sätt att anpassa komponenter utan att behöva använda mer än bara CSS och HTML. Vi har hittills täckt formulär och navigeringselement. I nästa kommer vi lära oss hur du gör en anpassad nedrullning. Gärna lämna en kommentar nedan om du har några frågor eller feedback!
