Comment créer une boîte déroulante de bio avec CSS

Après avoir publié la dernière refonte de Theme Lab, j'ai reçu un certain nombre de commentaires sur la boîte « menu déroulant bio » que j'ai placée dans ma barre de navigation. Je l'ai codée avec seulement quelques lignes de CSS et une image d'arrière-plan.

Dans cet article de conseils CSS, je vais vous expliquer comment obtenir un effet de survol similaire sur vos propres sites.

L'exemple

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

En gros, une fois que vous survolez la div qui contient le widget, une div « cachée » apparaîtra, qui sera notre boîte déroulante de bio.

Notez sur l'image de gauche, la boîte de bio grise n'apparaîtra que si vous survolez la div contenant le titre « Bio Hover ».

Le sélecteur

Il n'est pas très important d'avoir un sélecteur CSS unique pour styliser la div dans laquelle vous souhaitez placer votre boîte déroulante de bio. En gros, c'est parce que si vous n'avez pas le balisage correspondant dans cette div, rien ne s'affichera de toute façon en cas d'état de survol.

Bien que dans le cas de Twenty Eleven, nous puissions nous contenter de styliser la classe « aside », il est probable que vous ne vouliez une boîte déroulante de bio que sur l'une de vos divs de toute façon, nous serons donc plus spécifiques.

Heureusement, avec WordPress, il génère une tonne de sélecteurs CSS uniques que vous pouvez utiliser. Dans cet exemple, il génère #test-3 que nous utiliserons désormais.

Remarque : Cela peut varier en fonction de votre installation WordPress. Utilisez un outil comme Chrome Developer Tools pour trouver facilement le sélecteur.

Balisage HTML

Dans cet exemple, le balisage HTML peut être placé directement dans le widget de texte WordPress. C'est ce que vous mettriez :

<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>

À moins que vous ne vouliez voler mon identité, vous voudrez probablement remplacer la photo par une photo de vous-même. Vous pouvez également la supprimer facultativement.

Comme nous utilisons un widget WordPress, le balisage extérieur est déjà généré pour nous. Voici ce que c'est au 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 vous faites cela sur un site HTML brut, vous aurez besoin d'une sorte de conteneur (comme celui-ci est l'aside) pour la liste déroulante de la bio avec autre chose à l'intérieur, sinon il n'y aura rien sur quoi passer la souris pour la faire apparaître.

Exemple concret : Ma div de liste déroulante de bio est à l'intérieur d'une balise li de mon menu de navigation.

Les deux premières lignes de CSS

Les deux premières lignes mettent en place le reste, j'ai donc mis cela dans sa propre section.

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

Explication

• Première ligne : Nous définissons le conteneur de la liste déroulante de bio avec un positionnement relatif. Cela facilite le positionnement absolu de la boîte déroulante de bio près du conteneur d'origine.
• Deuxième ligne : Cela rend essentiellement la boîte déroulante de bio invisible par défaut. Elle est censée n'apparaître que lorsque vous passez la souris sur quelque chose, vous vous souvenez ?

Remarque : Si vous n'êtes pas fan de display: none; ou si vous pensez que cela nuit à votre SEO ou autre, vous pouvez également utiliser quelque chose comme position: absolute; left: -100000em; ce qui la déplacera tellement hors de la page que personne ne la verra de toute façon.

Le reste du CSS

Le code CSS suivant gère l'apparence de la boîte déroulante de bio.

#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;
}

Explication

C'est là que nous utilisons enfin le sélecteur #text-3 avec la pseudo-classe :hover pour que la boîte déroulante de bio n'apparaisse que lorsque vous passez la souris sur le widget de texte.

• Première ligne : display: block; rend la boîte déroulante de bio visible. z-index: 99; garantit que la boîte s'affichera par-dessus tout le reste, sans obstruction.
• Deuxième ligne : Cela positionne la boîte sous l'aside à environ 25 pixels.
• Troisième ligne : Ce sont juste quelques styles cosmétiques, définissant l'arrière-plan en gris clair avec un bon espacement.
• Quatrième ligne : Ceci est une typographie explicite.

Note : Concernant la première ligne, si vous utilisez la technique position: absolute; left: -100000em; au lieu de display: none; comme je l'ai expliqué plus haut, utiliser display: block ici ne serait pas nécessaire (puisque les divs sont déjà considérés comme des éléments de niveau bloc de toute façon). Au lieu de cela, vous devriez utiliser left: 0; pour ramener le div sur la page.

Et pour l'image, juste un simple float et une marge droite.

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

Intégration WordPress

Je ne trouve pas de bon moyen d'intégrer cela dans un menu WordPress dynamique (wp_nav_menu) sans filtrer énormément quelque chose. La façon la plus simple peut être de coder en dur votre navigation et de passer à autre chose (ce que je fais sur tous mes sites).

Si vous avez des techniques pour insérer du balisage dans un élément de menu WordPress, ce qui est requis pour cela, j'aimerais beaucoup l'entendre dans les commentaires. Je suis sûr que c'est possible mais cela dépasse le cadre de cet article sur les astuces CSS.

Conclusion

Oui, je me rends compte que vous ne voudriez probablement pas mettre une bio déroulante dans votre barre latérale, vous la mettriez dans un endroit avec un espace limité qui n'a pas la place pour qu'elle soit entièrement affichée (comme une barre de navigation encombrée).

Heureusement, vous pouvez utiliser cette technique à peu près n'importe où. Je voulais juste passer en revue une technique de base sur la façon d'afficher un div entier au survol.

Ce n'est pas trop compliqué et vous n'avez pas besoin de trucs Javascript fantaisistes pour le faire, bien que si vous vouliez un effet de fondu high-tech, vous devriez probablement utiliser du Javascript.