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

A voir également:

Menu déroulant avec image
Menu déroulant excel - Guide
Image iso - Guide
Menu démarrer windows 11 - Guide
Acronis true image - Télécharger - Sauvegarde
Google recherche par image - Guide

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

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.

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|[×º°"~'"°º×

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 ^^

Discussions similaires

Retrouver l'image originale après avoir fait des modifications ?

Suppression listes déroulantes

les entrées et les sortées

Discussions similaires

Newsletters