CSS-Miniaturraster mit einem dynamischen Flyout-Menü erstellen

Bei der Darstellung von Daten in einem Raster verlieren Sie oft die Möglichkeit, zusätzliche Informationen einzufügen. Abgesehen von dem Anhängen dynamischer Menüs oder von Hover-Effekten gibt es sehr wenig Platz, um Metadaten zu jedem Element hinzuzufügen. Ich möchte dieses Tutorial als Denkprozess für das Benutzererlebnis von Miniaturbildgittern verwenden.

Wir erstellen ein kleines Flyout-Menü mit zusätzlichen Informationen zum Bild. Dazu gehören der Bildname, die ursprüngliche Quell-URL und die Autoren-URL. Das Schöne an diesem Beispiel ist, dass wir den dynamischen Effekt nur mit CSS3-Eigenschaften erstellen. Meist unterstützen alle standardkonformen Browser dynamische CSS3-Animationen, und diese sehen fantastisch aus! Aber auch ohne Animationen funktionieren die Flyout-Inhalte immer noch einwandfrei und werden für ein rundum erfreuliches Benutzererlebnis natürlich abgebaut.

Live Demo - Quellcode herunterladen

Das Dokument erstellen

Um zu beginnen, müssen wir ein einzelnes HTML5-Dokument erstellen, das sich als Indexseite verhält. Ich habe eine Kopie des CSS von Google Webfonts beigefügt, die die Kavoon-Schriftfamilie zu unserer Auswahl hinzufügt. Dies wird für einen auffälligen Entwurf auf den Kopfzeilentext angewendet. Wenn sich der Benutzer im Internet Explorer 8 oder früher befindet, fügen wir das HTML5shiv-Dokument ein, um eine gute Messung zu ermöglichen.

Thumbnail-Galerie mit CSS-Flyouts

Dies stellt sicher, dass neuere HTML5-Elemente wie

oder

wird richtig rendern. Jetzt können wir uns schnell in den Hauptteil bewegen, in dem sich der Code für die Thumbnail-Galerie befindet. Ich habe die verschiedenen Bilder anhand einer ungeordneten Liste aufgeteilt, wobei jedes Listenelement eine andere Miniaturansicht darstellt. Ungeordnete Listen funktionieren in typischen Website-Layouts sehr gut, da sie leicht angepasst werden können und bestimmte Datensektionen enthalten.

Miniaturansichten sortieren

In jedem Elementcontainer müssen zwei separate Inhaltsblöcke enthalten sein. Das erste ist das Bild, das möglicherweise auf eine andere Seite Ihrer Website verweist. In der Regel führen Galerien zu internen Seiten mit einem größeren Foto der Miniaturansicht oder manchmal zur Originalquelle. In diesem Fall führen wir keine Links, um den Benutzer nicht von unserer Seite zu entfernen.

Das andere interne Element ist ein div, das die .Meta Klassenname. Dieser Inhalt ist absolut positioniert, um ihn aus dem Dokumentenfluss zu entfernen. Die Positionierung ist wichtig, da das Flyout-Menü über den anderen Elementen angezeigt werden muss und nicht entfernt werden muss.

<ul> <li> <img src="//lesptitesaffairesdemayl.be/img/images_1/creating-a-css-thumbnail-grid-with-a-dynamic-flyout-menu.png"> <h2>Abschließende Gedanken</h2> <p>Das Erstellen einer Benutzeroberfläche, die zu den meisten Benutzerpräferenzen passt, kann schwierig sein. Sie möchten bessere Lösungen anbieten, ohne die Einfachheit zu beeinträchtigen. Ich liebe die Idee von verborgenen Webelementen. Dieses Tutorial ist eine fantastische Demonstration, wie diese nur mit CSS-Eigenschaften angewendet werden können. Ich hoffe, dieser Code kann für Entwickler hilfreich sein, die ein ähnliches Layout erstellen möchten.</p> <p>Neben der oben genannten Live-Demo sollten Sie sich auch gerne eine Kopie meines Quellcodes holen. Ein solches Projekt ist nicht sehr schwer zu verstehen, aber manchmal kann es einfacher sein, die bereits vorhandenen Codes zu lösen. Es gibt auch viele Möglichkeiten, die Qualität von Animationen zu verbessern, indem Sie einige zusätzliche jQuery-Effekte hinzufügen. Wenn Sie Fragen oder Anregungen zum Tutorial haben, teilen Sie uns dies bitte im Post-Diskussionsbereich mit.</p> <blockquote><p> Live Demo - Quellcode herunterladen </p></blockquote> <p></li></ul>