Jag älskar utmaningen att bygga något med CSS som använder ett objekt för att utlösa en annan. Det kan bli ganska knepigt att lägga i sig om alla berörda bitar och komma fram till ett sätt att flyta din HTML på ett sätt som enkelt kan styras i din CSS.
Idag ska vi gå in på en sådan utmaning. Vi bygger en grundläggande hemsida som byter ut bakgrundsbilder baserat på den länk som du svänger över i navigeringen. På vägen kommer du att lära dig allt om tanken på fjärrflyttningar och hur man kan använda dem i dina projekt.
Fingerfärdighet
Visste du att det är möjligt att bara använda CSS för att manipulera ett element när en användare svänger över ett helt annat objekt? Det är lite knepigt, men när du hänger på det, kan du dra av några riktigt coola effekter.
För att se hur det fungerar, låt oss använda ett riktigt grundläggande exempel. Tänk dig att du har följande kod:
Innan vi riktade endast närliggande syskon, siktar vi nu på någon gammal syskon. Så nu kommer alla bilder som ligger på samma nivå i DOM-trädet som vårt ankar att få en kant som ett resultat av svävaren.
Ändra det sätt du tror
? Ge inte upp! Experimentation är där utbildning sker.Observera att för den här tekniken att fungera måste de objekt som vi bråkar vara nära relaterade från DOM-trädets perspektiv. Mer specifikt måste det objekt som du ska manipulera vara en syskon eller ett barn av det element som du vill sväva över. Du kan inte ha en fjärrkontroll som kräver att klättra upp DOM-trädet.
När du börjar bygga projekt som använder den här tekniken kommer du att upptäcka att dessa enkla regler kan orsaka några riktiga huvudvärk! De böjer och bryter det format som du brukar använda för att strukturera din HTML och få dig att tänka kreativt för att räkna ut hur man omstrukturerar dina element precis precis så att fjärrkontrollen fungerar.
För dagens exempel tog det mig ganska många försök att strukturera min HTML och CSS ordentligt så att allting fungerar. Ur ditt perspektiv kommer det att se super enkelt eftersom jag lägger ut det i rätt ordning. Kom bara ihåg att när du gör det i dina egna projekt kommer det att ta en hel del fiddling och tweaking. Ge inte upp! Experimentation är där utbildning sker.
Vad vi bygger
Det objekt som vi bygger idag är en enkel hemsida hemsida. Navigationen är en vertikal meny längst ner till vänster och resten av innehållsrutan tas upp av en stor bild.
demo: Klicka här för att starta.
Om det här är allt vi gjorde skulle HTML vara ganska enkelt. En stor div med en bakgrundsbild som innehåller en smalare div med en vit bakgrund och en oorderad lista inuti. Vi vill dock göra saker lite mer komplicerade. När användaren svänger över en navigeringslänk måste bakgrundsbilden ändras.
Det betyder att vi behöver en hel stapel bakgrundsbilder. Utmaningen är dock att ta reda på var man ska placera de här bilderna i markeringen så att vi kan komma åt dem via en fjärrvägare. Låt oss se hur det fungerar.
Steg 1: html
För vår HTML, kommer vi behöva en behållare en oordnad lista inuti ett navelement, som är inslaget i en container div. Här är den grundläggande strukturen:
Vi kommer självklart att vilja ha lite text i vår navigering, så vi kan även kasta in det här. Observera också att jag kastade i en rubrik för att fungera som platsidentifierare.
För att slutföra, låt oss lägga till i våra bilder. Vi vill att varje länk ska motsvara en bild. Det bästa sättet att göra detta är att placera en bild efter varje länk, så att vi kan styra dessa bilder när en länk är svävad genom att använda en syskonväljare som vi gjorde ovan. Så här ser detta ut i åtgärd:
Detta kommer att se till att vi har den vänstra vitbalken som vi vill ha. Låt oss nu fortsätta utforma texten och listan. Vi måste rikta oss till h1 och ul, och sedan tillämpa några grundläggande styling:
Nu när vi har utformat ul-elementet, måste vi gräva in och specifikt utforma bitarna av text, som verkligen är alla ankareelement inuti listobjekt. Mål dessa, sätt dem att blockera så att du specifikt kan ställa in sina dimensioner och sedan utforma dem så här:
Med tanke på det sätt som vårt dokument är strukturerat, kan vi inte flytta runt det navelementet eller ofordnade listan för mycket. Som ett resultat måste vi specifikt rikta in det första listobjektet så att vi kan knyta texten på plats. Detta uppnås med nth-barn (IE9 och överst, använd selectivizr för äldre webbläsare).
Steg 5: Hover Styles
Som du kan se i bilden ovan, ser navigationsmenyn perfekt ut nu.Tyvärr gör det fortfarande ingenting! Oroa dig inte, vi har satt upp allt som vi behöver, så några rader av CSS är allt som krävs för att få allt till liv.
Först lade jag till en svängningseffekt i texten så att du har visuell återkoppling att något händer där. Detta är viktigt för att illustrera konceptet att vad användaren gör till vänster påverkar bilderna till höger.
Slutligen, för att avsluta allt, är allt vi behöver göra för att vänta på att användaren ska sväva, ta sedan en av bilderna utanför behållaren och dra in den över standardbakgrundsbilden. Observera att vi gör det med den närliggande syskonkombinationen som vi lärde oss om tidigare. Detta gör att vi tar tag i den specifika bilden som är kopplad till det ankar som svävar över.
Se den i aktion
Med det är vi alla färdiga! Nu är det dags att ta en titt på frukten av vårt arbete. Var noga med att svänga över var och en av länkarna i sidofältet och se hur det påverkar bakgrundsbilden.
demo: Klicka här för att starta.
Gå bygga något
Vid det här laget bör du ha en bra uppfattning om hur man använder fjärrkontroll för att dra av några fina CSS-händelser. Tänk på något coolt att göra med denna idé och bygga den. Det verkar enkelt, men jag kan nästan garantera att du kommer att springa in i några otroliga snags under vägen. Hänvisa bara tillbaka hit för att se hur det fungerar och se till att du håller på det tills du har behärskat det!