Accentsconagua
Share
Welkom bij de volgende in onze reeks zelfstudies waarin we de algemene broer / zus-combinator gebruiken ~ om verschillende componenten voor het web te maken. Deze tutorial behandelt navigatie-elementen met behulp van links en radio-ingangen.
In aanvulling op CSS selectors, de zal veranderen eigenschappen en invoerstatussen uit de vorige zelfstudie, behandelen we ook een border hack, Sass for loops, calc (), en toegankelijkheid!
Dit is de demo die we gaan bouwen:
Een snelle disclaimer: deze CSS-effecten werken mogelijk al dan niet in oudere browsers - ik heb ze getest in de nieuwste versies van Chrome, Firefox en Safari.
Ik zal Sass gebruiken, een CSS-preprocessor om het codeerproces te versnellen!
Ik gebruik ook de geweldige AutoPrefixer in plaats van de voorvoegsels van de leverancier. Als u CodePen gebruikt, moet u naar de instellingen van uw pen gaan, op CSS klikken en AutoPrefixer selecteren.
De eerste versie die we gaan maken, is de tabbalk waaruit bestaat koppelingen. Dit is het meest rechttoe rechtaan en gemakkelijk te maken; het is ideaal voor een algemene navigatie die op meerdere verschillende webpagina's kan worden gebruikt.
We beginnen met een basis element met vijf schakels en een rand. U kunt ook een ander containerelement gebruiken, maar ik geef de voorkeur aan een navigatie-element, omdat dat het doel van dit fragment is. De rand dient om aan te geven over welke koppeling wordt zweefde of geselecteerd.
Ik wikkel mijn navigatie ook in een andere container, maar dat heb je niet nodig voor de standaardmarkup!
De volgende stap is het creëren van een visuele basis voor de tabbladen. De container moet relatief gepositioneerd zijn; we gebruiken flexbox om de links op één regel te plaatsen, maar u kunt ook drijvers gebruiken. De koppelingen moeten evenveel ruimte innemen, waarbij de hele breedte van de container wordt opgevuld.
Dit onderdeel kan lastig zijn, dus je zou het moeten aanpassen op basis van je use-case. Ik wist dat ik precies vijf koppelingen nodig had voor deze demo, dus ik kon 5 gebruiken als een Sass-variabele $ n om de exacte breedte te berekenen calc (100% / 5). Ik deed dit omdat ik het linknummer boven aan mijn stylesheet gemakkelijk en snel wilde wijzigen, maar u kunt ook een recht percentage gebruiken 20% als je liever niet gebruikt calc (), of een vaste breedte 160px als je niet weet hoeveel links je hebt.
De rand moet dezelfde breedte hebben als elke link. We gebruiken dezelfde breedte die we voor de links hebben gebruikt. Ten slotte plaatsen we het absoluut in de linkerbenedenhoek van de container.
Het volgende deel maakt gebruik van de algemene selector! We zullen stileren : hover, :actief, en :focus, evenals een .actief klasse als u JavaScript wilt gebruiken om de rand "vast te houden" zodra u op een link klikt.
Elke keer dat u de muisaanwijzer over een koppeling beweegt, moet de rand naar de positie van de koppeling gaan. Als elke link is 160px, vervolgens zwevend over de tweede link zorgt ervoor dat de rand beweegt 160px naar rechts; als u over de derde link zweeft, moet de rand bewegen 320px naar rechts.
Met behulp van deze informatie kunnen we een Sass for-lus bouwen die de cijfers automatisch berekent. Dit is een richtlijn die een reeks stijlen een bepaald aantal keer uitvoert - in dit geval zou het deze transformatiestijl uitvoeren $ n tijden, of 5, zoals we eerder hebben aangegeven.
een @for $ i van 1 tot $ n &: nth-child (# $ i) & .active ~ hr transform: translateX (# ($ i - 1) * 100%); &: hover, &: focus, &: active ~ hr, ~ .active ~ hr transform: translateX (# ($ i - 1) * 100%);
$ i is het nummer dat de lus momenteel is: 1, 2, 3, 4 of 5. Om dit nummer binnen de lus te gebruiken, zullen we eraan moeten ontsnappen door het te omwikkelen met een hekje en accolades # .
Als we vaste breedten zouden gebruiken, zouden we deze vervangen 100%, die de rand over de volle breedte verplaatst, met 160px of hoe breed de links ook mogen zijn. Als je uiteindelijk gebruikt .actief, u moet specificatie gebruiken ~ .active ~ hr zoals in het bovenstaande voorbeeld omdat anders de rand blijft plakken aan de actieve positie.
Je kunt dit ook doen zonder een for-lus, maar het is niet zo eenvoudig om bij te werken of aan te passen. De tweede link (a: n-kind (2)) beweegt translateX (100%), de vierde link wordt verplaatst translateX (300%), etc. U moet een transformatie opgeven voor elke koppeling in uw navigatie.
Als je in het bovenstaande voorbeeld met de muis over de Sass-code zweeft, Bekijk gecompileerd knop moet in de rechter benedenhoek verschijnen waarop u kunt klikken om de gecompileerde CSS te bekijken. Dit is handig om te zien hoe de for-lus werkt en hoe u hetzelfde kunt bereiken zonder deze Sass-richtlijn.
Ten slotte voegen we enkele overgangen toe om de "glijdende" beweging van de rand van link naar link te maken. We voegen een langzamere overgang aan de rand zelf toe voor wanneer deze terugkeert naar de standaardpositie en een snellere overgang naar de rand bij zweeftekst zodat deze naar de juiste link klikt. De laatste stap is om wat kleurveranderingen toe te voegen aan de rand bij zweven en klikken!
Deze volgende versie van de aangepaste tabbladnavigatie ziet er hetzelfde uit als de eerste, maar maakt gebruik van radio-ingangen in plaats van links. Dit werkt goed bij het navigeren door inhoudsecties op dezelfde pagina!
Het grootste verschil in de HTML is dat we nu twee elementen per tabblad nodig hebben: een label om het tabblad visueel weer te geven en een radio-ingang om functionaliteit toe te voegen.
Elke radio-ingang heeft dezelfde naam, zodat het selecteren van de ene de andere zal deselecteren. De labels komen overeen met de ID van elke invoer. U kunt ook uw radio-ingangen en labels ordenen zodat de bijbehorende labels en ingangen naast elkaar staan als die structuur de voorkeur heeft!
Styling voor het radiotabblad nav is bijna precies hetzelfde als het link-tabblad nav. Het enige verschil is dat elke radio-invoer absoluut bovenop het bijbehorende label moet worden geplaatst. Ik gebruikte een Sass for loop om herhaling te voorkomen, en ook gebruikt calc () om percentage-decimalen te vermijden, zoals 16,6667%.
Voor de transformaties, in plaats van een .actief klas, zullen we gebruiken : aangevinkt. Deze status is handig omdat nu de rand blijft "plakken" wanneer u een van de radio's selecteert!
Pijltabs zijn functioneel hetzelfde als de radiotabbladen; ze verschillen alleen visueel. Deze versie is goed voor de stijl van broodkruimels of stapsgewijze inhoud. U kunt ook links gebruiken als u dat wilt!
De HTML-instelling is hetzelfde als de bovenstaande tabbladen voor radio-invoer. Als u koppelingen wilt gebruiken, is dit hetzelfde als de koppelingstabbladen.
Het grootste verschil in styling komt van de rand die zweeft. In plaats van een dunne lijn op de bodem neemt de rand in plaats daarvan de volledige hoogte van de navigatie in beslag. Het wordt ook gepositioneerd achter de ingangen en labels.
Om de spitse uiteinden te maken, gebruiken we een border-hack hr: vóór en h: na. Elk pseudo-element heeft een hoogte en breedte van 0, maar een randbreedte die het even groot maakt als de bovenliggende container. Dit creëert driehoeken die we individueel kunnen aanpassen om onze puntige uiteinden te maken.
Voor de linker reeks driehoeken moet de linkerrand wit zijn terwijl de anderen zijn gekleurd; voor de juiste reeks driehoeken moet de linkerrand worden gekleurd terwijl de andere randen wit zijn. We zullen ook de linker- en rechtergrenzen van beide sets instellen om dunner te zijn dan de boven- en onderkant, zodat de randen er korter uitzien. Vervolgens plaatsen we elke set aan de linker- en rechterkant van hr.
De functionaliteit en animatie zijn precies hetzelfde als de radio-ingangen, of links als u ze in plaats daarvan gebruikt.
Hoewel deze navigatie-elementen goed werken vanuit een visueel standpunt, kan iemand die een schermlezer gebruikt of die andere vormen van toegankelijkheid nodig heeft, problemen hebben met het lezen of openen van elke optie.
Om een aantal van deze problemen te verhelpen, kunnen we een combinatie van rollen, labels, verborgen elementen en tabindex-kenmerken gebruiken, zodat de navigatie op de juiste manier leest vanuit het oogpunt van toegankelijkheid. Ik leer nog steeds veel over toegankelijkheid, maar deze combinatie lijkt het beste te werken met deze navigatiestijl.
Ik heb me vooral gericht op het verbergen van elementen die niet nodig zijn voor schermlezers, terwijl ik elementen lab el die belangrijk zijn voor de functionaliteit van de nav, zoals de radio-ingangen die standaard geen tekst bevatten, zoals links. Probeer wat het beste werkt voor uw gebruik!
Er zijn tientallen verschillende manieren om de algemene sibling-selector te gebruiken die visueel, functioneel of beide is. Het biedt een krachtige manier om componenten aan te passen zonder meer dan alleen CSS en HTML te hoeven gebruiken. We hebben tot nu toe formulier- en navigatie-elementen behandeld; in de volgende leren we een aangepaste vervolgkeuzelijst maken. Voel je vrij om een reactie hieronder te plaatsen als je vragen of feedback hebt!
