Après avoir publié la refonte la plus récente de Theme Lab, j’ai eu plusieurs commentaires sur la boîte “liste déroulante de la chronologie” que j’ai dans ma barre de navigation. Je l’ai codé avec seulement quelques lignes de CSS avec une image de fond.
Dans cet article sur les conseils CSS, je vais expliquer comment vous pouvez avoir un effet de survol similaire sur vos propres sites.
L’exemple
Dans cet exemple, j’utiliserai un widget texte dans le thème Twenty Eleven, le nouveau WordPress 3.2 par défaut.
Fondamentalement, une fois que vous survolez la div contenant le widget, une div “cachée” apparaîtra qui sera notre liste déroulante bio.
Notez que dans l’image de gauche, la boîte bio grise n’apparaîtra que si vous survolez la div qui contient l’en-tête “Bio Hover”.
le sélectionneur
Il n’est pas si important d’avoir un seul sélecteur CSS pour styliser la div dans laquelle vous voulez mettre votre liste déroulante bio. Fondamentalement, c’est parce que si vous n’aviez pas le balisage d’accompagnement sur cette div, rien ne s’afficherait de toute façon dans le cas d’un état flottant.
Bien que dans le cas de Twenty Eleven, nous pourrions nous contenter de concevoir la classe “séparément”, vous ne voulez probablement qu’une liste déroulante bio dans l’une de vos divs de toute façon, nous serons donc plus précis.
Heureusement avec WordPress, il crache une tonne de sélecteurs CSS uniques que vous pouvez utiliser. Dans cet exemple, il crache #test-3 que nous utiliserons désormais.
Noter: Cela peut varier en fonction de votre installation WordPress. Utilisez quelque chose comme les outils de développement Chrome 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 tu mettrais :
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.
À moins que vous ne vouliez voler mon identité, vous voudrez probablement remplacer la photo par une photo de vous. Vous pouvez également éventuellement le supprimer.
Puisque nous utilisons un widget WordPress, le balisage périphérique a déjà été généré pour nous. Voilà ce qu’il en est au total.
Si vous faites cela sur un site HTML simple, vous aurez besoin d’une sorte d’emballage (comme ceci est l’aparté) pour la liste déroulante bio avec autre chose, sinon il n’y a rien à survoler pour se dérouler.
Exemple concret : Ma div déroulante bio est à l’intérieur d’une balise li dans mon menu de navigation.
Les deux premières lignes de CSS
Les deux premières lignes ont vraiment mis en place le reste, donc je l’ai mis dans sa propre section.
#text-3 { position: relative; }
.bio-dropdown { display: none; }
Explication
- Première ligne: Nous avons défini le wrapper déroulant bio pour avoir un positionnement relatif. Cela facilite le positionnement absolu de la boîte déroulante bio plus près de l’emballage d’origine.
- Deuxième ligne: Cela rend essentiellement la liste déroulante bio invisible par défaut. Il n’est censé apparaître que lorsque vous survolez quelque chose, vous vous souvenez ?
Noter: Si vous n’êtes pas fan de l’écran : aucun ; ou vous pensez que cela nuit à votre référencement ou quelque chose comme ça, vous pouvez aussi utiliser quelque chose dans la ligne de position : absolu ; gauche : -100000em ; ce qui le déplacera tellement loin de la page que personne ne le verra de toute façon.
Le reste du CSS
Le code CSS suivant gère l’apparence de la liste déroulante 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 en conjonction avec la pseudo-classe :hover pour faire apparaître la liste déroulante bio uniquement lorsque vous survolez le widget texte.
- Première ligne: L’écran : bloquer ; rend la liste déroulante bio visible. L’indice z : 99 ; garantit que la boîte sera affichée au-dessus de tout le reste, sans obstruction.
- Deuxième ligne: Cela place la boîte sous le côté d’environ 25 pixels.
- Troisième ligne : Ce ne sont que quelques styles cosmétiques, définissant l’arrière-plan sur un gris clair avec un rembourrage décent.
- Quatrième ligne : C’est toute la typographie qui s’explique d’elle-même.
Noter: À propos de la première ligne, si vous utilisez position : absolu ; gauche : -100000em ; technique au lieu de visualisation : aucune ; comme je l’ai expliqué ci-dessus, utiliser display: block ici ne serait pas nécessaire (puisque les divs sont supposés être des éléments de niveau bloc de toute façon). Au lieu de cela, vous devrez utiliser left: 0; pour replacer la div sur la page.
Et pour l’image, juste un simple flottant et une marge droite.
.bio-dropdown .photo { float: left; margin-right: 10px; }
Intégration WordPress
Je ne peux pas penser à un bon moyen d’intégrer cela dans un menu dynamique WordPress (wp_nav_menu) sans filtrer les ordures de quelque chose. Le plus simple est peut-être de coder votre navigation et de la surcharger (ce que je fais sur tous mes sites).
Si vous avez des techniques sur la façon d’insérer un balisage dans un élément de menu WordPress, ce qui est nécessaire pour cela, j’aimerais avoir de vos nouvelles dans les commentaires. Je suis sûr que c’est possible, mais cela dépasse le cadre de cet article sur les conseils CSS.
conclusion
Oui, je me rends compte que vous ne voulez probablement pas mettre une liste déroulante bio dans votre barre latérale, vous la placeriez quelque part avec un espace limité qui n’a pas de place pour qu’elle s’affiche complètement (comme une barre de navigation exiguë).
Heureusement, vous pouvez utiliser cette technique n’importe où. Je voulais juste passer en revue une technique de base sur la façon d’afficher une div entière en survol.
Ce n’est pas trop compliqué et vous n’avez pas besoin de Javascript sophistiqué pour le faire, mais si vous vouliez un effet de fondu de haute technologie, vous devrez probablement utiliser du Javascript.
