Menu déroulant avec image

haoru Messages postés 17 Date d'inscription   Statut Membre Dernière intervention   -  
haoru Messages postés 17 Date d'inscription   Statut Membre Dernière intervention   -
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

A voir également:

4 réponses

Réponse 1 / 4
Utilisateur anonyme
 
Salut,

comment fais tu ton site ?

Connais tu css ?

bonne journée
0
Réponse 2 / 4
haoru Messages postés 17 Date d'inscription   Statut Membre Dernière intervention  
 
Je fais mon site en full CSS3.
0
Réponse 3 / 4
Utilisateur anonyme
 
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|[׺°"~'"°º×
0
Réponse 4 / 4
haoru Messages postés 17 Date d'inscription   Statut Membre Dernière intervention  
 
merci bcp, je vais regarder ça de plus prêt ^^
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
PIX
plart -
jordane45 -

1 réponse
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
menu caché
laurent -
ChariduP -

7 réponses