Menu déroulant avec image
Bonjour,
Je suis actuellement entrain de refaire un site web afin de lui donner un petit coup de jeune et surtout une touche de modernité.
J'aimerai y intégrer un Menu horizontal avec menu déroulant dans lequel je voudrais insérer des images. Un peu comme sur le site d'amazon ou encore dans ce template
https://preview.themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/full_screen_preview/5484319?ref=fab4real
cependant je n'ai pas trouvé comment faire, si vous pouvez m'aider ou me rediriger vers un tuto ça serait génial parce que là :/
merci d'avance, bonne journée
Je suis actuellement entrain de refaire un site web afin de lui donner un petit coup de jeune et surtout une touche de modernité.
J'aimerai y intégrer un Menu horizontal avec menu déroulant dans lequel je voudrais insérer des images. Un peu comme sur le site d'amazon ou encore dans ce template
https://preview.themeforest.net/item/flatsome-multipurpose-responsive-woocommerce-theme/full_screen_preview/5484319?ref=fab4real
cependant je n'ai pas trouvé comment faire, si vous pouvez m'aider ou me rediriger vers un tuto ça serait génial parce que là :/
merci d'avance, bonne journée
4 réponses
-
Salut,
comment fais tu ton site ?
Connais tu css ?
bonne journée
-
Je fais mon site en full CSS3.
-
salut,
ok alors tout va bien.
sur amazon c'est un liste à puce en ligne contenant une image et du texte dans un lien.
<ul class="generic-subnav-flyout-itemgroup"> <li class="generic-subnav-flyout-item"> <a class="generic-subnav-flyout-link" href="/gp/bestsellers/hi/ref=sv_hi_0/ref=sv_hi_0/ref=sn_gfs_co_auto-xiste_B_1"> <img class="generic-subnav-flyout-image" height="110" width="90" border="0" alt="Bricolage" src="http://g-ecx.images-amazon.com/images/G/08/products/visualsubnav/tools_90x110_3._V329239901_.jpg"> <div class="generic-subnav-flyout-title">Bricolage</div> </a> </li> <li class="generic-subnav-flyout-item"> <a class="generic-subnav-flyout-link" href="/gp/bestsellers/kitchen/ref=zg_bs_nav_0/ref=sn_gfs_co_auto-xiste_Cm_2"> <img class="generic-subnav-flyout-image" height="110" width="90" border="0" alt="Cuisine & maison" src="http://g-ecx.images-amazon.com/images/G/08/products/visualsubnav/kitchen1_90x110_2._V329239873_.jpg"> <div class="generic-subnav-flyout-title">Cuisine & Maison</div> </a> </li> <li class="generic-subnav-flyout-item"> <a class="generic-subnav-flyout-link" href="/gp/bestsellers/hpc/ref=zg_bs_nav_0/ref=sn_gfs_co_auto-xiste_H_3"> <img class="generic-subnav-flyout-image" height="110" width="90" border="0" alt="Hygienesoinsducorps" src="http://g-ecx.images-amazon.com/images/G/08/products/visualsubnav/beauty_90x110_5._V329239882_.jpg"> <div class="generic-subnav-flyout-title">Hygiène & Soins du corps</div> </a> </li> <li class="generic-subnav-flyout-item"> <a class="generic-subnav-flyout-link" href="/gp/bestsellers/sports/ref=zg_bs_nav_0/ref=sn_gfs_co_auto-xiste_S_4"> <img class="generic-subnav-flyout-image" height="110" width="90" border="0" alt="Sportsloisirs" src="http://g-ecx.images-amazon.com/images/G/08/products/visualsubnav/sports_90x110_11._V329239901_.jpg"> <div class="generic-subnav-flyout-title">Sports & Loisirs</div> </a> </li> </ul>
Il faut cacher cette liste et l'afficher au survol de la souris.
Comme dans ce tutoriel sauf que les sous menu devront être en ligne et contenir une image en plus.
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php
bonne soirée
׺°"~'"°º×]|I{*------» LÖBÖTÖ «------*}I|[׺°"~'"°º× -
merci bcp, je vais regarder ça de plus prêt ^^
