Sujet Précédent Sujet Suivant

Menu déroulant avec image

Fermé
haoru Messages postés 17 Date d'inscription lundi 29 décembre 2008 Statut Membre Dernière intervention 1 juillet 2015 - 30 juin 2015 à 05:31
haoru Messages postés 17 Date d'inscription lundi 29 décembre 2008 Statut Membre Dernière intervention 1 juillet 2015 - 1 juil. 2015 à 21:18
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

4 réponses

Réponse 1 / 4
Utilisateur anonyme
30 juin 2015 à 11:15
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 lundi 29 décembre 2008 Statut Membre Dernière intervention 1 juillet 2015
30 juin 2015 à 21:33
Je fais mon site en full CSS3.
0
Réponse 3 / 4
Utilisateur anonyme
Modifié par lobotoFix le 30/06/2015 à 21:50
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 lundi 29 décembre 2008 Statut Membre Dernière intervention 1 juillet 2015
1 juil. 2015 à 21:18
merci bcp, je vais regarder ça de plus prêt ^^
0