Skapa ett CSS-miniatyrgrid med en Dynamisk Flyout-meny

När du presenterar data i ett nät förlorar du ofta möjligheten att inkludera extra information. Bortsett från att lägga till dynamiska menyer eller svängareffekter finns det väldigt lite utrymme att inkludera metadata på varje objekt. Jag vill använda den här handledningen som en tankeprocess i användarupplevelsen av miniatyrbilder i bild.

Vi kommer att skapa en liten fly-meny med ytterligare information om bilden. Detta inkluderar bildnamn, ursprunglig källadress och URL för författare. Skönheten i detta exempel är att vi kommer att skapa den dynamiska effekten med endast CSS3 egenskaper. För det mesta kommer alla standardkompatibla webbläsare att stödja dynamiska CSS3-animationer och dessa ser fantastiskt ut! Men även utan animeringar fungerar flyoutinnehållet fortfarande korrekt och bryts ned naturligt för en användarvänlig användarupplevelse.

Live Demo - Hämta källkod

Utarbeta dokumentet

För att komma igång behöver vi skapa ett enda HTML5-dokument som fungerar som vår indexsida. Jag har tagit med en kopia av Google Webfonts CSS som lägger till Kavoon-fontfamiljen i vårt urval. Detta kommer att appliceras på rubriktexten för en prydlig design. Också om användaren är på Internet Explorer 8 eller tidigare tar vi HTML5shiv-dokumentet till god åtgärd.

Thumbnail Gallery med CSS Flyouts

Detta kommer att säkerställa några nyare HTML5-element som

eller

kommer att göra korrekt. Nu kan vi snabbt gå in i kroppssektionen som håller vår miniatyrgalleri kod. Jag har delat upp de olika bilderna med en oordnad lista där varje listobjekt representerar en annan miniatyrbild. Oordnade listor fungerar väldigt bra i typiska webbplatslayouter eftersom de är lätta att anpassa och innehåller specifika sekter av data.

Sortera miniatyrbilder

Inne i varje objektbehållare måste vi inkludera två separata innehållsblock. Först är bilden som kan eller kan inte länka till en annan sida på din webbplats. Vanligtvis leder gallerier till interna sidor med ett större foto av miniatyrbilden, eller ibland till den ursprungliga källan. I det här fallet länkar vi inte någonstans för att inte driva användaren av vår sida.

Det andra interna elementet är en div med hjälp av .meta klassnamn. Det här innehållet är helt placerat för att ta bort det från dokumentflödet. Placeringen är viktig eftersom vi behöver flyrmenyn för att dyka upp på de andra elementen och inte trycka dem bort.

<ul> <li> <img src="//lesptitesaffairesdemayl.be/img/images_1/creating-a-css-thumbnail-grid-with-a-dynamic-flyout-menu.png"> <h2>Slutgiltiga tankar</h2> <p>Att bygga ett användargränssnitt som passar in i de flesta användarens preferenser kan vara svårt. Du vill erbjuda bättre lösningar utan att äventyra enkelheten. Jag älskar idén om dolda webbelement, och denna handledning är en fantastisk demonstration av hur dessa kan appliceras enbart med hjälp av CSS-egenskaper. Jag hoppas att den här koden kan vara användbar för utvecklare som är intresserade av att bygga en liknande layout.</p> <p>Tillsammans med att jag tittar på min live-demo ovan bör du också gärna ta en kopia av min källkod. Ett sådant projekt är inte särskilt svårt att förstå, men ibland kan det vara lättare att arbeta bort existerande koder. Det finns också många sätt att förbättra animationens kvalitet genom att inkludera ytterligare jQuery-effekter. Om du har några frågor eller idéer i handledningen kan du dela med oss ​​i diskussionsområdet.</p> <blockquote><p> Live Demo - Hämta källkod </p></blockquote> <p></li></ul>