Cómo crear un cuadro desplegable de biografía con CSS

Después de lanzar el rediseño más reciente de Theme Lab, recibí varios comentarios sobre el cuadro de "menú desplegable de biografía" que tengo en mi barra de navegación. Lo codifiqué con solo unas pocas líneas de CSS junto con una imagen de fondo.

En esta publicación de consejos de CSS, explicaré cómo puedes tener un efecto de desplazamiento similar en tus propios sitios.

El ejemplo

In this example, I’ll be using a text widget in the Twenty Eleven theme, the new default as of WordPress 3.2.

Básicamente, una vez que pases el cursor sobre el div que contiene el widget, aparecerá un div "oculto" que será nuestro cuadro desplegable de biografía.

Nota en la imagen de la izquierda, el cuadro de biografía gris no aparecerá a menos que pases el cursor sobre el div que contiene el encabezado "Bio Hover".

El selector

No es muy importante tener un selector CSS único para estilizar el div en el que deseas colocar tu cuadro desplegable de biografía. Básicamente, esto se debe a que si no tienes el marcado acompañante en ese div, de todos modos no aparecerá nada en caso de un estado de desplazamiento.

Aunque en el caso de Twenty Eleven, podríamos arreglárnoslas solo estilizando la clase "aside", es probable que solo quieras un cuadro desplegable de biografía en uno de tus divs de todos modos, así que seremos más específicos.

Afortunadamente, con WordPress, genera una tonelada de selectores CSS únicos que puedes usar. En este ejemplo, genera #test-3 que usaremos a partir de ahora.

Nota: Esto puede variar según tu instalación de WordPress. Usa algo como las Herramientas para desarrolladores de Chrome para encontrar fácilmente el selector.

Marcado HTML

En este ejemplo, el marcado HTML se puede colocar directamente en el widget de texto de WordPress. Esto es lo que pondrías:

<div class="bio-dropdown">
<img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" />
<p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p>
</div>

A menos que quieras robar mi identidad, probablemente querrás reemplazar la foto con una foto tuya. También puedes eliminarla opcionalmente.

Dado que estamos usando un widget de WordPress, el marcado exterior ya está generado para nosotros. Esto es lo que es en total.

<aside id="text-3" class="widget widget_text">
<h3 class="widget-title">Bio Hover</h3>
<div class="textwidget">
<div class="bio-dropdown"><img class="photo"  alt="Leland!" src="http://www.themelab.com/wp-content/themes/themelab5/images/leland-medium.png" /><p>Hello. I am Leland Fiegel and I am the creator and founder of Theme Lab. I love to write code, especially HTML, CSS and for WordPress.</p></div>
</div>
</aside>

Si estás haciendo esto en un sitio HTML sin procesar, necesitarás algún tipo de contenedor (como este que es el aside) para el menú desplegable de la biografía con algo más dentro, de lo contrario, no habrá nada sobre lo que pasar el cursor para que se despliegue.

Ejemplo de la vida real: Mi div del menú desplegable de la biografía está dentro de una etiqueta li en mi menú de navegación.

Primeras dos líneas de CSS

Las primeras dos líneas realmente preparan el resto, así que puse esto en su propia sección.

#text-3 { position: relative; }
.bio-dropdown { display: none; }

Explicación

• Primera línea: Establecemos el contenedor del menú desplegable de la biografía con posicionamiento relativo. Esto facilita el posicionamiento absoluto de la caja del menú desplegable de la biografía cerca del contenedor original.
• Segunda línea: Esto esencialmente hace que la caja del menú desplegable de la biografía sea invisible por defecto. Solo debe aparecer cuando pasas el cursor sobre algo, ¿recuerdas?

Nota: Si no te gusta `display: none;` o crees que perjudica tu SEO o algo así, también puedes usar algo como position: absolute; left: -100000em; que básicamente lo moverá tan lejos de la página que nadie lo vería de todos modos.

El resto del CSS

El siguiente código CSS se encarga de la apariencia de la caja del menú desplegable de la biografía.

#text-3:hover .bio-dropdown {
display: block; z-index: 99;
position: absolute; top: 25px;
background: #ccc; padding: 10px 10px 0 10px;
font-size: 11px; line-height: 18px; color: #666;
}

Explicación

Aquí es donde finalmente usamos el selector #text-3 junto con la pseudoclase :hover para que la caja del menú desplegable de la biografía aparezca solo cuando pasas el cursor sobre el widget de texto.

• Primera línea: `display: block;` hace visible la caja del menú desplegable de la biografía. `z-index: 99;` asegura que la caja se mostrará sobre todo lo demás, sin obstrucciones.
• Segunda línea: Esto posiciona la caja debajo del aside a unos 25 píxeles.
• Tercera línea: Estos son solo algunos estilos cosméticos, que establecen el fondo en un gris claro con un relleno decente.
• Cuarta línea: Toda esta tipografía se explica por sí misma.

Nota: Sobre la primera línea, si estás usando la técnica position: absolute; left: -100000em; en lugar de display: none; como expliqué anteriormente, usar display: block aquí no sería necesario (ya que los divs se asumen como elementos de nivel de bloque de todos modos). En su lugar, tendrías que usar left: 0; para mover el div de vuelta a la página.

Y para la imagen, solo un simple float y margen derecho.

.bio-dropdown .photo { float: left; margin-right: 10px; }

Integración con WordPress

No se me ocurre una buena manera de integrar esto en un menú dinámico de WordPress (wp_nav_menu) sin filtrar mucho algo. La forma más fácil puede ser codificar tu navegación manualmente y superarlo (lo cual hago en todos mis sitios).

Si tienes alguna técnica sobre cómo insertar marcado en un elemento de menú de WordPress, lo cual es necesario para esto, me encantaría saberlo en los comentarios. Estoy seguro de que es posible, pero va más allá del alcance de esta publicación de consejos de CSS.

Conclusión

Sí, me doy cuenta de que probablemente no querrías poner un menú desplegable de biografía en tu barra lateral, lo pondrías en un lugar con espacio limitado que no tenga espacio para que se muestre completamente (como una barra de navegación abarrotada).

Afortunadamente, puedes usar esta técnica en casi cualquier lugar. Solo quería repasar una técnica básica sobre cómo mostrar un div completo al pasar el mouse.

No es muy complicado y no necesitas ningún truco de Javascript para hacerlo, aunque si quisieras algún efecto de desvanecimiento de alta tecnología, probablemente tendrías que usar algo de Javascript.