Vanligtvis har webbutvecklare använt JavaScript för att skapa dynamiska sidanimeringar. Dolda menyer och undernavigation är bara några exempel på hur dessa tekniker skulle användas på en levande webbplats. Tack vare tillägget av CSS3-övergångar kan vi nu efterlikna dessa animeringar, utan JavaScript i sikte.
I denna handledning vill jag demonstrera hur man bygger en inre dold innehållsrad som glider ner när svävar. Du kan placera detta i din rubrik, sidfot eller till och med någonstans inne i sidinnehållet. Det är en mycket flexibel teknik som inte kräver mycket tid att arbeta. Dessutom kommer alla moderna webbläsare att stödja CSS3-övergångseffekter.
Live Demo - Hämta källkod
Skapa HTML
Huvudindex.html sidan är väldigt okomplicerad och vi behöver inte inkludera några alternativa bibliotek. jQuery är inte ens nödvändigt om du inte vill använda andra plugins. Jag lagrar alla huvudwebbsidens CSS-koder i ett dokument som heter styles.css.
För att få den dolda div-fältet att expandera på svävar måste vi ha det här näst i huvudstången. När en användare sveper ett element i jQuery kan vi tvinga ett annat internt element att vara öppen med den. Men när man använder CSS3-övergångar skapar de omedelbart svävarhändelser och icke-svävarhändelser. Så snart användaren flyttar sin markör bort från toppstången, skulle den gömma div omedelbart, om den inte är nestad inuti.
Så jag har skapat en ny div med ID #tophiddenbar. Det är kapslade inuti #topbar eftersom det som ett barnelement kommer att hålla svävarstaten för alla föremål. Hängande över den dolda baren är nu också ifrån varandra #topbar och så kommer CSS-övergångarna inte omedelbart att gömma sig innan du kan läsa eller klicka på länkar. Jag brydde mig inte om att använda en oorderad lista för länkarna men självklart skulle detta vara bästa praxis när man skapar egna HTML-subnavigeringar.
Dokument CSS
Vanligtvis har vi samma återställningar och dokumentformat som andra liknande handledning. Men det finns några uppdateringar till #topbar element som är avgörande för att få detta till arbete. Namnlösa: Vi behöver namnet överflöd: dold egendom för att säkerställa att extra innehåll inte kommer att visas när sidan laddas. Du måste använda detta på ditt eget behållarelement så att den dolda diven inte visas först, då ökar vi höjdsvärdet genom en övergång.
Om du är bekant med CSS-övergångar borde det inte vara svårt att förstå. I grund och botten ställer vi in en tid för att animationen ska hända, tillsammans med de egenskaper där vi behöver övergångseffekter. Du behöver inte inkludera alla CSS-återställningar som jag har lagt till ovan. De är bara viktiga för den här demoen, och de kan erbjuda en alternativ utgångspunkt i motsats till andra bibliotek som Twitter Bootstrap.
Animera menyn
Den faktiska övergångsegenskapen kommer att appliceras på #topbar-elementet eftersom vi animerar höjdvärdet. Jag använder en fast höjd på 36px vilket ökar för att visa den inre gömda diven. Och kom ihåg att inledningsvis denna div kan visas rätt i sidordningen, den är bara dold på grund av överflödesegenskapen på behållaren #topbar element.
När du svävar den översta verktygsfältet kommer den att expandera till 60px i höjd. Det här är tillräckligt med utrymme för att visa upp vår nya subnavigering med länkar tillbaka på sidor från Design Shack. Denna typiska design är verkligen lätt att passa in i något annat projekt du har. Så länge som bakgrunden kan förlängas vertikalt kan den användas som behållarelement.
Övergångsegenskaperna CSS3 har också två leverantörs prefix som används i Mozilla och Webkit-återgivningsmotorer. De linjär sökord är bara en typ av animeringsstil som kan utelämnas för standardvärdet. Det här heter egenskapen för övergångstidsfunktion och det har ett valfritt antal alternativa värden som du kan testa. Hur som helst den här animeringen är perfekt för alla webbplatser som behöver hålla lite innehåll dolt på sidan.
Live Demo - Hämta källkod
Slutsats
Du kommer märka att den här tekniken implementerar några CSS-tekniker som är nyare till spektrumet. Men det är inget alltför förvirrande för typiska frontend webbutvecklare. Det finns andra möjliga metoder som att använda absolut positionering nestad i en yttre behållare. Att ha båda delarna bredvid varandra i HTML kan ibland förlora fokus när du svävar över det dolda elementet, så det är bäst att hålla dem nestade inuti. Du är välkommen att dela med dig av andra tankar eller frågor om den här handledningen i nedanstående diskussionsområde.