Creación de una cuadrícula de miniaturas CSS con un menú desplegable dinámico

Cuando se presentan datos en una cuadrícula, a menudo se pierde la capacidad de incluir información adicional. Aparte de agregar menús dinámicos o efectos de desplazamiento, hay muy poco espacio para incluir metadatos en cada elemento. Quiero usar este tutorial como un proceso de pensamiento en la experiencia del usuario de las cuadrículas de miniaturas de imágenes.

Crearemos un pequeño menú desplegable con información adicional sobre la imagen. Esto incluye el nombre de la imagen, la URL de origen original y la URL del autor. La belleza de este ejemplo es que crearemos el efecto dinámico utilizando solo las propiedades CSS3. En su mayoría, todos los navegadores compatibles con los estándares admitirán animaciones dinámicas de CSS3, ¡y se ven fantásticas! Pero incluso sin animaciones, el contenido flotante seguirá funcionando correctamente y se degradará de forma natural para una experiencia de usuario agradable y completa.

Demo en vivo - Descargar código fuente

Elaboración del documento

Para comenzar, necesitamos crear un único documento HTML5 que se comporte como nuestra página de índice. He incluido una copia de Google Webfonts CSS que agrega la familia de fuentes Kavoon a nuestra selección. Esto se aplicará en el texto del encabezado para un diseño llamativo. Además, si el usuario está en Internet Explorer 8 o una versión anterior, incluimos el documento HTML5shiv como medida adecuada.

Galería de miniaturas con CSS Flyouts

Esto asegurará cualquier nuevo elemento HTML5 como

o

se procesará correctamente. Ahora podemos pasar rápidamente a la sección del cuerpo que contiene el código de nuestra galería de miniaturas. He dividido las diferentes imágenes usando una lista desordenada donde cada elemento de la lista representa una miniatura diferente. Las listas desordenadas funcionan muy bien en diseños de sitios web típicos porque son fáciles de personalizar y contienen secciones específicas de datos.

Ordenar miniaturas

Dentro de cada contenedor de elementos debemos incluir dos bloques de contenido separados. Primero está la imagen que puede o no enlazar a otra página en su sitio web. Normalmente, las galerías conducen a páginas internas con una foto más grande de la foto en miniatura, o en ocasiones a la fuente original. En este caso, no estamos vinculando a ningún lado para no expulsar al usuario de nuestra página.

El otro elemento interno es un div que usa el .meta nombre de la clase. Este contenido está posicionado absolutamente para eliminarlo del flujo de documentos. El posicionamiento es importante porque necesitamos que el menú desplegable aparezca sobre los otros elementos, y no para alejarlos.

<ul> <li> <img src="//lesptitesaffairesdemayl.be/img/images_1/creating-a-css-thumbnail-grid-with-a-dynamic-flyout-menu.png"> <h2>Pensamientos finales</h2> <p>Construir una interfaz de usuario que se ajuste a la mayoría de las preferencias del usuario puede ser difícil. Quieres ofrecer mejores soluciones sin comprometer la simplicidad. Me encanta la idea de elementos web ocultos, y este tutorial es una demostración fantástica de cómo se pueden aplicar simplemente utilizando las propiedades CSS. Espero que este código sea útil para los desarrolladores interesados ​​en crear un diseño similar.</p> <p>Además de ver mi demostración en vivo, también deberías tomar una copia de mi código fuente. Tal proyecto no es muy difícil de entender, pero a veces puede ser más fácil trabajar con los códigos preexistentes. También hay muchas formas de mejorar la calidad de las animaciones incluyendo algunos efectos jQuery adicionales. Si tiene alguna pregunta o idea sobre el tutorial, comparta con nosotros en el área de discusión posterior.</p> <blockquote><p> Demo en vivo - Descargar código fuente </p></blockquote> <p></li></ul>