Comment créer un menu déroulant avec des images au lieu de texte ?

Sélection déroulante avec images

Vous cherchez à créer une sélection déroulante qui affiche des images au lieu du texte. Bien que la liste déroulante jQuery soit souvent suggérée, elle nécessite toujours du texte à côté des images.

Solution : Remplacer le texte par des images

Étonnamment, vous pouvez obtenir ce menu déroulant sans JavaScript ! Voici comment :

Structure HTML

Utiliser les boutons radio et les étiquettes :

Style CSS

Stylisez-les en utilisant CSS. Masquez les boutons radio, stylisez les étiquettes pour qu'elles ressemblent à des options de liste déroulante et agrandissez la liste déroulante au survol.

Fonctionnalité

Les boutons radio sont liés aux étiquettes de telle sorte que cliquer sur une étiquette active le bouton radio correspondant. Lorsque vous survolez la liste déroulante, elle se développe et affiche toutes les options d'image. L'image sélectionnée reste visible même à l'état réduit.

Exemple

Voir l'exemple complet sur : http://jsfiddle.net/NDCSR/1/

Détails de mise en œuvre

• Utilisez-le avec un positionnement absolu à l'intérieur un conteneur avec un positionnement relatif et un indice z élevé.
• Pour différents styles de ligne, utilisez une image d'arrière-plan unique pour chaque étiquette en fonction de son attribut "for".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!