Création d'une grille de vignettes CSS avec un menu déroulant dynamique

Lorsque vous présentez des données dans une grille, vous perdez souvent la possibilité d'inclure des informations supplémentaires. À part l'ajout de menus dynamiques ou d'effets de survol, il y a très peu de place pour inclure des métadonnées sur chaque élément. Je souhaite utiliser ce didacticiel en tant que processus de réflexion dans l'expérience utilisateur des grilles de vignettes d'images.

Nous allons créer un petit menu déroulant contenant des informations supplémentaires sur l'image. Cela inclut le nom de l'image, l'URL source d'origine et l'URL de l'auteur. La beauté de cet exemple est que nous allons créer l'effet dynamique en utilisant uniquement les propriétés CSS3. La plupart des navigateurs conformes aux normes prendront en charge les animations CSS3 dynamiques et elles ont l’air fantastique! Mais même en l'absence d'animations, le contenu instantané fonctionnera toujours correctement et se dégradera naturellement pour offrir une expérience utilisateur agréable et complète.

Live Demo - Télécharger le code source

Fabriquer le document

Pour commencer, nous devons créer un document HTML5 unique qui se comporte comme notre page d'index. J'ai inclus une copie du CSS Google Webfonts qui ajoute la famille de polices Kavoon à notre sélection. Cela sera appliqué sur le texte de l'en-tête pour une conception spectaculaire. De même, si l'utilisateur utilise Internet Explorer 8 ou une version antérieure, nous incluons le document HTML5shiv.

Galerie de vignettes avec des dépliants CSS

Cela garantira que tous les nouveaux éléments HTML5 tels que

ou

rendra correctement. Maintenant, nous pouvons passer rapidement à la section body qui contient notre code de galerie de vignettes. J'ai divisé les différentes images en utilisant une liste non ordonnée, chaque élément de la liste représentant une vignette différente. Les listes non ordonnées fonctionnent très bien dans les présentations de site Web classiques, car elles sont faciles à personnaliser et contiennent des sectes de données spécifiques.

Tri des vignettes

À l'intérieur de chaque conteneur d'éléments, nous devons inclure deux blocs de contenu distincts. La première est l'image qui peut ou non créer un lien vers une autre page de votre site Web. Les galeries mènent généralement aux pages internes avec une photo plus grande de la vignette, ou parfois à la source originale. Dans ce cas, nous ne lions aucun lien afin de ne pas conduire l'utilisateur de notre page.

L’autre élément interne est une div utilisant le .meta nom du cours. Ce contenu est positionné absolument pour le supprimer du flux de documents. Le positionnement est important car nous avons besoin que le menu déroulant apparaisse au-dessus des autres éléments et non pour les repousser.

<ul> <li> <img src="//lesptitesaffairesdemayl.be/img/images_1/creating-a-css-thumbnail-grid-with-a-dynamic-flyout-menu.png"> <h2>Dernières pensées</h2> <p>Construire une interface utilisateur qui correspond à la majorité des préférences de l'utilisateur peut être difficile. Vous souhaitez proposer de meilleures solutions sans compromettre la simplicité. J'aime l'idée des éléments Web cachés, et ce tutoriel est une démonstration fantastique de la façon dont ils peuvent être appliqués simplement à l'aide de propriétés CSS. J'espère que ce code pourra être utile aux développeurs souhaitant créer une présentation similaire.</p> <p>En plus de vérifier ma démo en direct ci-dessus, vous devriez également vous sentir libre de récupérer une copie de mon code source. Un tel projet n’est pas très difficile à comprendre, mais il peut parfois être plus facile de travailler avec les codes préexistants. Il existe également de nombreuses façons d'améliorer la qualité des animations en incluant des effets jQuery supplémentaires. Si vous avez des questions ou des idées sur le tutoriel, n'hésitez pas à les partager avec nous dans la zone de discussion après discussion.</p> <blockquote><p> Live Demo - Télécharger le code source </p></blockquote> <p></li></ul>