Construire un panneau de survol avec CSS3 et jQuery

De nombreux magasins en ligne et sites de commerce électronique utilisent un petit panneau de détails pour offrir plus d'informations sur un produit. Je me souviens de cela depuis les débuts de la navigation sur Template Monster, une tendance commune pour les concepteurs de sites Web modernes.

Dans ce tutoriel, je voudrais expliquer comment dupliquer cet effet en utilisant du code très basique. J'ai fourni deux versions différentes, une construite sur jQuery et une autre utilisant CSS3. Il y a des avantages pour chacun et vous pouvez télécharger une copie de mon code de tutoriel pour voir lequel vous préférez.

Démo jQuery - Démo CSS3 - Télécharger le code source

Structurer la page

Ma version de jQuery a une configuration HTML légèrement différente de celle de l'adaptation CSS3. Nous aurons évidemment besoin d’une copie de la bibliothèque jQuery, mais le traitement du panneau de détails est encore plus important. Avec JS, j'appelle un seul élément HTML pour remplacer le contenu HTML interne. CSS3 requiert des éléments div uniques à côté de chacun des liens miniatures, ce qui ajoute du volume à votre page.

Ce code est situé dans le corps de ma version de jQuery. Les vignettes sont divisées en éléments de liste où nous extrayons des informations pour le panneau de détails à partir d'attributs HTML. Ces détails peuvent être trouvés dans le lien d'ancrage, la balise image et une balise méta associée contenant la description du contenu. J'utilise également un attribut de données HTML5 pour la date de publication.

Vers le bas, vous remarquerez un seul conteneur avec l'identifiant # détails-volet. Le ciblage de cet objet dans jQuery nous permet de remplacer les valeurs internes pour les détails de survol. Examinons maintenant un élément d'élément de liste de la version CSS3.

J'ai changé l'ID pour une classe de .details-pane parce que nous avons besoin de plusieurs div adjacents à côté de chaque vignette. CSS3 vérifie quand l'utilisateur survole le lien et affiche le div frère, qui contient déjà toutes les informations. Donc, un autre avantage de l'utilisation de CSS3 est qu'il n'est pas nécessaire d'extraire des informations d'attributs à chaque changement d'affichage de la cible.

Je veux commencer par l'exemple CSS3 car mon code jQuery est un peu plus compliqué. Cela pourrait être une autre raison de rester avec la version HTML / CSS frontend, bien que cet effet soit perdu dans les anciens navigateurs.

Survolez les détails avec CSS3

Tout cela fonctionne avec un signe plus (+) dans le sélecteur. CSS ciblera le tout dernier élément du sélecteur, dans ce cas notre .details-pane qui se trouve directement à côté de chaque lien d'ancrage. J'ai donné aux liens une classe de .hvrlink ils sont donc plus faciles à identifier.

J'espère qu'il n'y a rien de trop compliqué dans ce bloc d'installation initiale. Chaque élément de la liste est flottant à gauche avec une marge large pour ne positionner que deux vignettes par ligne. Ces éléments de liste contiennent le lien miniature et la fenêtre de détails. Nous donnons le

  • une position relative pour que nous puissions maintenant utiliser le positionnement absolu sur le panneau de survol.

    Ce que vous pourriez trouver intéressant, c’est le changement de position entre les deux premiers liens. Pour tous les autres liens, j'ai ajouté une classe de .côté droit sur le conteneur du panneau de détails. À l'origine, nous avons poussé le panneau de survol de 290px vers la gauche, car il s'agit de la longueur de la vignette. Mais dans la colonne de droite, nous voyons ce panneau planer hors de l’écran, nous préférons donc qu’il apparaisse à gauche. Cela utilise une position gauche négative basée sur la largeur totale de 530px du volet de détails lui-même.

    Ces deux derniers sélecteurs sont tout ce dont nous avons besoin pour configurer correctement le survol. Lorsque l'utilisateur passe la souris sur un lien miniature, nous affichons immédiatement les informations correspondantes. .details-pane. Le deuxième bloc de code continue à s'afficher même lorsque l'utilisateur fait glisser la vignette sur les détails, de sorte qu'il s'affiche toujours jusqu'à ce que les utilisateurs quittent complètement cet élément de la liste.

    Passer à jQuery

    Abordons le code JS trouvé au bas de mon original index.html fichier. Une grande partie du code CSS est similaire, mais il est encore plus court et facile à lire car nous n’avons pas besoin de valeurs absolues. Ceci est géré à la place par des calculs jQuery qui peuvent paraître compliqués - mais tout cela a du sens une fois que vous y réfléchissez.

    Je cible la vignette pour l'écouteur d'événement de survol et, une fois que cela est déclenché, nous configurons toute une série de variables.Le premier grand bloc de code obtient toutes les informations importantes que nous devons ajouter dans le conteneur de panneau de survol.

    Ensuite, nous devons rassembler les coordonnées pour comprendre où ce panneau de détails doit apparaître. La coordonnée y ne changera pas en fonction de la position, mais la coordonnée x changera si nous survolons la colonne de droite. J'ai une déclaration logique vérifiant par rapport à la position actuelle de l'image divisée par la fenêtre entière en utilisant $ (fenêtre) .width (). Si l’image dépasse 50% de la largeur totale de la page, vous devez l’afficher à gauche plutôt qu’à droite.

    Cet ensemble de code suivant remplace les valeurs HTML internes dans le volet d'informations à l'aide de variables définies précédemment. À la fin, nous mettons à jour les propriétés CSS intégrées pour les modifier. bloc de visualisation et le faire apparaître sur la page. Lors du survol de la vignette, il masque à nouveau automatiquement l'affichage, à moins que nous ne survolions le volet des détails. Ce survol sera capturé à l'aide d'un écouteur d'événements distinct, ce qui nécessite un peu de logique délicate.

    Notez que j'utilise deux méthodes distinctes .on () associées au même sélecteur jQuery. Vous pouvez envisager de les associer à une chaîne jQuery avec d'autres écouteurs d'événements similaires. En vol stationnaire, il suffit de garder le panneau affiché en tant qu'élément de bloc. Mais lorsque vous quittez le panneau de détails, nous souhaitons le masquer uniquement lorsque l'utilisateur ne survole pas la même image miniature que celle utilisée pour l'affichage.

    La variable e est renvoyé après chaque événement mouseout, nous indiquant quel nouvel élément est survolé. Appliquer la propriété parentNode nous pouvons vérifier où ce nouvel élément est contenu. Cette instruction contient quatre vérifications logiques distinctes, et trois d’entre elles vérifient les objets dans le volet de détails. Le nom de la variable ce se réfère à la # détails-volet.

    Nous devons vérifier si l'utilisateur survole l'élément h3, le paragraphe ou même l'image (intégrée dans un lien d'ancrage et un div). Si c'est le cas, nous ne cachons rien.

    Je vérifie aussi avec le nodeName propriété au cas où l'utilisateur survole le volet d'informations dans le corps. Si le nœud renvoie IMG, il ne doit pas essayer de cacher quoi que ce soit immédiatement. C'est plus une solution piratée car les seules images de ma démo se rapportent aux vignettes elles-mêmes. Ainsi, lorsque vous passez la souris sur l'image, vous souhaitez toujours que le panneau reste affiché, sinon, il est masqué à l'aide de la méthode .css () de jQuery.

    Je n'ai pas pu résoudre le problème avec une meilleure solution, mais j'aimerais connaître les réactions des autres développeurs. Il peut être possible de vérifier par rapport à la classe d’image, mais vous ne pouvez malheureusement pas le faire avec un nodeName propriété. Vous trouverez mon code commenté console.log (e.nodeName) que vous pouvez exécuter pour vérifier ce que ces propriétés renvoient au navigateur.

    Démo jQuery - Démo CSS3 - Télécharger le code source

    Fermeture

    Ces techniques sont généralement simples à comprendre si vous maîtrisez le développement Web frontal. CSS3 fournit une solution simple, mais il ne fonctionne correctement que dans les navigateurs conformes aux normes. Vous remarquerez que les deux versions sont fondamentalement les mêmes du point de vue du visiteur. Essayez ceci dans votre prochain projet Web et voyez ce que vous pouvez créer par dessus de mon modèle.