Creazione di una griglia di miniature CSS con un menu dinamico a comparsa

Quando si presentano i dati in una griglia, si perde spesso la possibilità di includere informazioni aggiuntive. A parte l'aggiunta di menu dinamici o effetti al passaggio del mouse, c'è ben poco spazio per includere i metadati su ciascun elemento. Voglio utilizzare questo tutorial come un processo mentale nell'esperienza utente delle griglie di miniature di immagini.

Creeremo un piccolo menu a comparsa contenente informazioni aggiuntive sull'immagine. Questo include il nome dell'immagine, l'URL di origine originale e l'URL dell'autore. La bellezza di questo esempio è che creeremo l'effetto dinamico utilizzando solo le proprietà CSS3. Per lo più tutti i browser compatibili con gli standard supportano animazioni CSS3 dinamiche e questi sono fantastici! Ma anche senza animazioni, il contenuto mobile continuerà a funzionare correttamente e si degraderà naturalmente per un'esperienza utente piacevole e completa.

Demo dal vivo - Scarica il codice sorgente

Elaborazione del documento

Per iniziare abbiamo bisogno di creare un singolo documento HTML5 che si comporta come la nostra pagina indice. Ho incluso una copia del CSS di Webfonts di Google che aggiunge la famiglia di caratteri Kavoon alla nostra selezione. Questo sarà applicato al testo dell'intestazione per un design appariscente. Inoltre, se l'utente è su Internet Explorer 8 o versioni precedenti, includiamo il documento HTML5shiv per buona misura.

Galleria di miniature con flyout CSS

Ciò garantirà qualsiasi nuovo elemento HTML5 come

o

renderà correttamente. Ora possiamo spostarci rapidamente nella sezione del corpo che contiene il codice della nostra galleria di miniature. Ho diviso le diverse immagini usando una lista non ordinata in cui ogni elemento della lista rappresenta una miniatura diversa. Le liste non ordinate funzionano molto bene nei layout tipici dei siti Web perché sono facili da personalizzare e contengono specifiche sette di dati.

Ordinamento di miniature

All'interno di ogni contenitore di oggetti dobbiamo includere due blocchi separati di contenuti. La prima è l'immagine che può o meno collegare a un'altra pagina nel tuo sito web. Tipicamente le gallerie porteranno a pagine interne con una foto più grande dello scatto in miniatura o, a volte, alla fonte originale. In questo caso non stiamo collegando da nessuna parte per non far allontanare l'utente dalla nostra pagina.

L'altro elemento interno è un div che usa il .meta nome della classe. Questo contenuto è posizionato assolutamente per rimuoverlo dal flusso del documento. Il posizionamento è importante perché abbiamo bisogno del menu a comparsa per apparire sopra gli altri elementi e non per allontanarli.

<ul> <li> <img src="//lesptitesaffairesdemayl.be/img/images_1/creating-a-css-thumbnail-grid-with-a-dynamic-flyout-menu.png"> <h2>Pensieri finali</h2> <p>Costruire un'interfaccia utente che si adatta alla maggior parte delle preferenze dell'utente può essere difficile. Vuoi offrire soluzioni migliori senza compromettere la semplicità. Adoro l'idea di elementi web nascosti, e questo tutorial è una fantastica dimostrazione di come questi possano essere applicati semplicemente usando le proprietà CSS. Spero che questo codice possa essere utile agli sviluppatori interessati a costruire un layout simile.</p> <p>Oltre a controllare la mia demo live qui sopra, dovresti anche sentirti libero di prendere una copia del mio codice sorgente. Un simile progetto non è molto difficile da capire, ma a volte può essere più semplice lavorare sui codici preesistenti. Ci sono anche molti modi per migliorare la qualità delle animazioni includendo alcuni effetti jQuery aggiuntivi. Se avete domande o idee sul tutorial, vi preghiamo di condividere con noi nell'area di discussione post.</p> <blockquote><p> Demo dal vivo - Scarica il codice sorgente </p></blockquote> <p></li></ul>