Hur man skapar CSS-baserat innehållsdrag
I dagens handledning ska vi lära oss hur vi kan skapa en horisontellt och vertikalt innehålls dragspel genom att bara använda CSS3. Det finns många jQuery-plugins ut som kan göra det här jobbet för dig men vad gör du om besökaren har Javascript avstängd, då kommer dragspelet inte fungera korrekt. Om ditt dragspel är rent i CSS så fungerar det för alla dina besökare.
Vi ska skapa en horisontell och vertikal innehåll dragspel. När du klickar på rubriktexten öppnas bilden med hela innehållet, och här är en snabb förhandsgranskning (skärmdumpar) hur de ser ut.
Gilla vad du ser? Låt kodningen börja!
1. Förbereda HTML och innehåll
Till att börja med ska vi skapa HTML för dragspelet.
Strukturen behöver en behållare div och sedan har a sektion för varje bild i dragspelet. I det här exemplet kommer vi att ha 5 bilder. Var och en av bilderna har en titel och en paragraf för innehållet.
Om oss
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det finns möjlighet att använda egna lösningar. Alquam semper mauris är bara en gång när det gäller lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac ärat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alquam är inte bara förut, men inte min. Nulla consectetur interdum massa, väl porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla väl eros. Namnet vehicula elementum nulla sed consequat. Phasellus eu erat enim. Prövas vid magna non mass dapibus scelerisque i eu lorem.
tjänster
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det finns möjlighet att använda egna lösningar. Alquam semper mauris är bara en gång när det gäller lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac ärat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alquam är inte bara förut, men inte min. Nulla consectetur interdum massa, väl porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla väl eros. Namnet vehicula elementum nulla sed consequat. Phasellus eu erat enim. Prövas vid magna non mass dapibus scelerisque i eu lorem.
blogg
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det finns möjlighet att använda egna lösningar. Alquam semper mauris är bara en gång när det gäller lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac ärat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alquam är inte bara förut, men inte min. Nulla consectetur interdum massa, väl porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla väl eros. Namnet vehicula elementum nulla sed consequat. Phasellus eu erat enim. Prövas vid magna non mass dapibus scelerisque i eu lorem.
Portfölj
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det finns möjlighet att använda egna lösningar. Alquam semper mauris är bara en gång när det gäller lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac ärat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alquam är inte bara förut, men inte min. Nulla consectetur interdum massa, väl porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla väl eros. Namnet vehicula elementum nulla sed consequat. Phasellus eu erat enim. Prövas vid magna non mass dapibus scelerisque i eu lorem.
Kontakta
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det finns möjlighet att använda egna lösningar. Alquam semper mauris är bara en gång när det gäller lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac ärat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alquam är inte bara förut, men inte min. Nulla consectetur interdum massa, väl porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla väl eros. Namnet vehicula elementum nulla sed consequat. Phasellus eu erat enim. Prövas vid magna non mass dapibus scelerisque i eu lorem.
Nu har vi våra bilder vi kan börja stila dragspelet.
2. CSS Styling
Först måste vi utforma innehållet div av dragspelet. Detta ger oss en uppfattning om hur man visar var och en av bilderna och var och en av rubrikerna.
/ * Definiera Accordion box * / .accordion width: 830px; overflow: hidden; marginal: 10px auto; color: # 474.747; Bakgrund: # 414.141; padding: 10px;
Nästa kommer vi att skapa rubrikerna för var och en av bilderna.
.dragspel sektion float: left; overflow: hidden; color: # 333; markören: pointer; bakgrund: # 333; marginal: 3px; .accordion: hover background: # 444;
Vi ställer in bakgrundsfärgen till att vara mörkgrå i avsnittet för att vara rubriken där besökarna klickar för att visa bilden. Vi använder det här avsnittet för både rubriken och innehållet, vilket innebär att vi kan använda mindre HTML och återanvända bildens rubrik som rubrik för innehållet.
.dragspel sektion p display: none;
För tillfället stängs alla diabilder så vi måste se till att stycket är gömt från bilden tills bilden är öppen, så sätt nu visningen av stycket till ingen.
.dragspel sektion: efter position: relativ; font-size: 24 bildpunkter; color: # 000; font-weight: bold; .accordion: nth-child (1): efter content: '1'; .accordionsektion: nth-barn (2): efter innehåll: '2'; .accordion: nth-child (3): efter innehåll: '3'; .accordion: nth-child (4): efter innehåll: '4'; .accordion: nth-child (5): efter innehåll: '5';
Med bilderna stängda vill vi visa ett nummer längst ner i rubriken för att säga vilken nummerbild vi är på. För detta ska vi använda CSS för att lägga till innehåll efter rubrikrubriken, detta kan göras med hjälp av :efter pseudoklassväljare.
Nu har vi skapat rubriken för bilden vi kan göra klickhändelsen för att visa bilden i dragspelet. Men det finns ett problem, CSS har inte ett klickhändelse, vilket är anledningen till att dragspelet normalt skapas genom att använda jQuery så att vi kan bifoga en klickhändelse till rubriktexten.
Vi måste efterlikna klickhändelsen i CSS som kan göras med hjälp av :mål pseudoklassväljare.
3. Användning :mål pseudoklassväljare
:mål låter oss ställa in fragmentidentifieraren. Ibland använder vi en ankerkod på sidan för att peka på en plats på sidan. Om du klickar på länken på id i ankaretiketten blir målet och du kan stile detta med hjälp av :mål väljare.
För att lägga till detta i dragspelet måste vi lägga till en länk runt rubriken som pekar på en id av bilden.
Om oss
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Det finns möjlighet att använda egna lösningar. Alquam semper mauris är bara en gång när det gäller lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Alquam ac ärat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Alquam är inte bara förut, men inte min. Nulla consectetur interdum massa, väl porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla väl eros. Namnet vehicula elementum nulla sed consequat. Phasellus eu erat enim. Prövas vid magna non mass dapibus scelerisque i eu lorem.
.dragspel avsnitt: mål bakgrund: #FFF; padding: 10px; .accordion: target: hover background: #FFF; .accordion: target h2 width: 100%; .accordion: mål h2 a färg: # 333; padding: 0; .accordion: target p display: block; .accordion h2 a padding: 8px 10px; display: block; font-size: 16px; font-weight: normal; färg: #eee; text-decoration: none;
Ovanstående kod ändrar storleken på bilden för att passa resten av dragspelet och ändrar bakgrundsfärgen till vit. Stycket var dolt så nu på målet måste vi visa stycket.
Nu när du klickar på dragspelets rubrik ändras bilden för att visa innehållet på objektglaset.
4. Horisontell dragning
Ovanstående kod kommer att skapa det allmänna dragspelet nu kan vi börja göra CSS-förändringar för skillnaderna mellan det horisontella och det vertikala dragspelet. Båda dessa dragspel har samma funktionalitet men rubrikstypen skulle vara annorlunda.
.horisontell sektion bredd: 5%; höjd: 250px; -moz-övergång: bredd 0.2s utmätning; -webkit-övergång: bredd 0.2s uthyrning; -o-övergång: bredd 0.2s utmätning; övergång: bredd 0.2s utmätning;
Först ställde vi in bredd av rubrikavsnittet till 5% så det är en sluten bild. Eftersom sektionen är både rubriken och innehållet för bilden måste vi lägga till animeringen för att visa innehållet med övergångsegenskapen.
/ * Placera siffran på bilden * / .horisontell sektion: efter toppen: 140px; vänster: 15px;
Placeringen av numret på bilden kommer att vara samma position på varje sluten rubrik, dessa är placerade annorlunda än de vertikala rubrikerna.
/ * Header of closed slide * /. Horizontal section h2 -webkit-transform: rotate (90deg); -moz-transform: Rotera (90deg); -o-transform: rotera (90deg); transformera: rotera (90deg); bredd: 240 pixlar; positioner: relativ; vänster: -100px; top: 85px; / * På musen över öppen bildruta * / .horisontal: mål bredd: 73%; höjd: 230px; . horisontellt: mål h2 topp: 0px; vänster: 0; -webkit-transform: rotate (0deg); -moz-transform: rotate (0deg); -o-transform: rotera (0deg); transformera: rotera (0deg);
Ovanstående kod kommer att ändra storleken på bilden så att den passar resten av dragspelet. Rubriken roterades vertikalt för att springa ner rubriken men nu med öppningen öppnas måste vi ändra texten till att vara horisontell genom att rotera texten tillbaka till 0 grader.
5. Vertikal Accordion
Det vertikala dragspelet fungerar på samma sätt som det horisontella dragspelet, förutom att vi behöver byta höjd istället för bredd och vi behöver inte ändra justeringen av texten.
.vertikal sektion bredd: 100%; höjd: 40 bildpunkter; -webkit-övergång: höjd 0.2s uthyrning; -moz-övergång: höjd 0.2s uthyrning; -o-övergång: höjd 0.2s uthyrning; övergång: höjd 0.2s utmätning; / * Ställ in höjd på bilden * / .vertical: mål höjd: 250px; bredd: 97%;
På mål händelse av det vertikala dragspelet vi kommer att ändra höjd av rubriken för att visa bilden.
.vertikal sektion h2 position: relativ; vänster: 0; top: -15px; / * Ange numrets position på objektglaset * / .vertical: efter top: -60px; vänster: 810px; .vertical sektion: mål: efter vänster: -9999px;
Ovanstående kommer att ändra placera av rubriktexten på den slutna bilden. Med den slutna bilden behöver vi ställa in placera av numret som ligger till höger om dragspelet. När bilden är öppen måste vi dölja det här numret på rubriken när målet är inställt så att vi ändrar vänsterpositionen från skärmen.
Nu när du klickar på dragspelets rubrik ändras bilden för att visa innehållet på objektglaset.
Redaktörens anteckning: Det här inlägget är skrivet av Paul Underwood för Hongkiat.com. Paul är en PHP-webbutvecklare från Bristol, Storbritannien. Han skriver handledning om webbutveckling: huvudämnena är PHP, jQuery, CSS3 och HTML5. Han registrerar också användbara kodutdrag på Paulund.co.uk.
