Comment faire un menu déroulant en images ? [Résolu/Fermé]

Signaler
Messages postés
330
Date d'inscription
lundi 29 novembre 2010
Statut
Membre
Dernière intervention
13 juillet 2014
-
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
-
Bonjour,

je souhaite créer une calculatrice spécial pour un jeu qui consiste à calculer le prix d'un vaisseau complet pour cela je les fait sous la forme d'un menu en 15 choix modifiable avec des menu déroulant ce qu'il y'a c'est que pour le premier menu j'aimerai mettre une images plutôt que le nom du vaisseau (plus facile de se repéré avec une image qu'avec les noms qui sont parfois très similaires)

Je cherche un code en html css de préférence

merci

12 réponses

Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
Hello,

es-tu encore en ligne ? Je m'y colle maintenant si tu es là.
Messages postés
330
Date d'inscription
lundi 29 novembre 2010
Statut
Membre
Dernière intervention
13 juillet 2014
14
Désolé j'était occuper sur le reste du programme hier sinon je me damande si le menu ne va pas être groumand car il y'a plus de 70 images a mettre dedans
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
Tu arrive a faire un croquis (genre wireframe) de ce que tu souhaites vraiment stp ?
Messages postés
330
Date d'inscription
lundi 29 novembre 2010
Statut
Membre
Dernière intervention
13 juillet 2014
14
Oui je peut mais c'est tout simplement remplacer le texte a selectionné par une image ^^
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
"sous la forme d'un menu en 15 choix modifiable avec des menu déroulant", c'est ce point là que je comprend pas... tu auras 15 menus déroulants différents ?
Messages postés
330
Date d'inscription
lundi 29 novembre 2010
Statut
Membre
Dernière intervention
13 juillet 2014
14
oui mais y'en n'aura que 10 en faite
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
donc 10 menus pour un seul et même vaisseau ?

Il ne vaudrait pas mieux un seul menu avec plusieurs options sélectionnables à l'intérieur ?
Messages postés
330
Date d'inscription
lundi 29 novembre 2010
Statut
Membre
Dernière intervention
13 juillet 2014
14
euh non excuse moi je me suis mal exprimé c'est un seul menu composé de 10 liste déroulantes
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
Salut

il faudrait deja savoir ce que tu appelle menu avec liste deroulante !

c est ca ?
(celui ci a un css un peu complex a cause du css3 mais je parle du principe !)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
    body{
      background-color: #EBEBEB;
       text-align: center;
    }

    ul#menurad, ul#menurad ul{
      margin: 0;
      list-style: none;
      padding: 0;
      background-color: #dedede;
      border-width: 1px;
      border-style: solid;
      border-color: #5f5f5f;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      border-radius: 5px;
    }

    ul#menurad ul{
      display: none;
      position: absolute;
      left: 0;
      top: 100%;
      -moz-box-shadow: 3.5px 3.5px 5px #000000;
      -webkit-box-shadow: 3.5px 3.5px 5px #000000;
      box-shadow: 3.5px 3.5px 5px #000000;
      background-color: #424542;
      border-width: 2px;
      border-radius: 6px;
      -moz-border-radius: 6px;
      -webkit-border-radius: 6px;
      border-color: #FFF;
      padding: 0 10px 10px;
    }

    ul#menurad li:hover > *{
      display: block;
    }

    ul#menurad li{
      position: relative;
      zoom: 1;
      display: block;
      white-space: nowrap;
      font-size: 0;
      float: left;
    }

    ul#menurad li:hover{
      z-index: 1;
    }

    ul#menurad ul ul{
      position: absolute;
      left: 100%;
      top: 0;
    }

    ul#menurad{
      font-size: 0;
      z-index: 999;
      position: relative;
      display: inline-block;
      zoom: 1;
      *display: inline;
    }

    ul#menurad > li, ul#menurad li{
      margin: 0;
    }

    * html ul#menurad li a{
      display: inline-block;
    }

    ul#menurad a:active, ul#menurad a:focus{
      outline-style: none;
    }

    ul#menurad a, ul#menurad a.pressed{
      display: block;
      vertical-align: middle;
      text-align: left;
      text-decoration: none;
      font: bold 14px Trebuchet MS;
      color: #000;
      text-shadow: #FFF 0 0 1px;
      cursor: pointer;
    }

    ul#menurad ul li{
      float: none;
      margin: 10px 0 0;
    }

    ul#menurad ul a{
      text-align: left;
      padding: 4px;
      background-color: #424542;
      background-image: none;
      border-width: 0;
      border-radius: 0px;
      -moz-border-radius: 0px;
      -webkit-border-radius: 0px;
      font: 14px Tahoma;
      color: #FFF;
      text-decoration: none;
      text-shadow: #FFF000;
    }

    ul#menurad li:hover > a{
      background-color: #444;
      border-color: #C0C0C0;
      border-style: solid;
      font: bold 14px Trebuchet MS;
      color: #FFF;
      text-decoration: none;
      text-shadow: #FFF 0 0 1px;
      background-image: url("backg.png");
      background-position: 0 100px;
    }

    ul#menurad img{
      border: none;
      vertical-align: middle;
      margin-right: 10px;
    }

    ul#menurad img.over{
      display: none;
    }

    ul#menurad li:hover > a img.def{
      display: none;
    }

    ul#menurad li:hover > a img.over{
      display: inline;
    }

    ul#menurad li a.pressed img.over{
      display: inline;
    }

    ul#menurad li a.pressed img.def{
      display: none;
    }

    ul#menurad span{
      display: block;
      overflow: visible;
      background-position: right center;
      background-repeat: no-repeat;
      padding-right: 0px;
    }

    ul#menurad a{
      padding: 10px;
      background-color: #444;
      background-image: url("backg.png");
      background-repeat: repeat;
      background-position: 0 0;
      border-width: 0 0 0 1px;
      border-style: solid;
      border-color: #C0C0C0;
      color: #000;
      text-decoration: none;
      text-shadow: #FFF 0 0 1px;
    }

    ul#menurad li:hover > a, ul#menurad li > a.pressed{
      background-color: #444;
      background-image: url("backg.png");
      background-position: 0 100px;
      border-style: solid;
      border-color: #C0C0C0;
      color: #FFF;
      text-decoration: none;
      text-shadow: #FFF 0 0 1px;
    }

    ul#menurad ul li:hover > a, ul#menurad ul li > a.pressed{
      background-color: #424542;
      background-image: none;
      font: 14px Tahoma;
      color: #F2B20E;
      text-decoration: none;
      text-shadow: #FFF000;
    }

    ul#menurad li.toppremier > a{
      border-width: 0;
      border-radius: 4px 0 0 4px;
      -moz-border-radius: 4px 0 0 4px;
      -webkit-border-radius: 4px;
      -webkit-border-top-right-radius: 0;
      -webkit-border-bottom-right-radius: 0;
    }

    ul#menurad li.topdernier > a{
      border-radius: 0 4px 4px 0;
      -moz-border-radius: 0 4px 4px 0;
      -webkit-border-radius: 0;
      -webkit-border-top-right-radius: 4px;
      -webkit-border-bottom-right-radius: 4px;
    }

    a.topniv {
      height: 18px;
      line-height: 18px;
    }
    /*]]>*/
    </style>
   </head>
  <body>
   <ul id="menurad" class="topmenu">
      <li class="toppremier">
        <a href="#" class="topniv"><span>Niveau 1</span></a>
        <ul>
          <li>
            <a href="#">Niveau 1 0</a>
          </li>
          <li>
            <a href="#">Niveau 1 1</a>
          </li>
          <li>
            <a href="#">Niveau 1 2</a>
          </li>
        </ul>
      </li><li>
        <a href="#" class="topniv"><span>Niveau 2</span></a>
        <ul>
          <li>
            <a href="#">Niveau 2 0</a>
          </li>
          <li>
            <a href="#">Niveau 2 1</a>
          </li>
          <li>
            <a href="#">Niveau 2 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="topniv"><span>Niveau 3</span></a>
        <ul>
          <li>
            <a href="#">Niveau 3 0</a>
          </li>
          <li>
            <a href="#">Niveau 3 1</a>
          </li>
          <li>
            <a href="#">Niveau 3 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="topniv"><span>Niveau 4</span></a>
        <ul>
          <li>
            <a href="#">Niveau 4 0</a>
          </li>
          <li>
            <a href="#">Niveau 4 1</a>
          </li>
          <li>
            <a href="#">Niveau 4 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="topniv"><span>Niveau 5</span></a>
        <ul>
          <li>
            <a href="#">Niveau 5 0</a>
          </li>
          <li>
            <a href="#">Niveau 5 1</a>
          </li>
          <li>
            <a href="#">Niveau 5 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="topniv"><span>Niveau 6</span></a>
        <ul>
          <li>
            <a href="#">Niveau 6 0</a>
          </li>
          <li>
            <a href="#">Niveau 6 1</a>
          </li>
          <li>
            <a href="#">Niveau 6 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="topniv"><span>Niveau 7</span></a>
        <ul>
          <li>
            <a href="#">Niveau 7 0</a>
          </li>
          <li>
            <a href="#">Niveau 7 1</a>
          </li>
          <li>
            <a href="#">Niveau 7 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="topniv"><span>Niveau 8</span></a>
        <ul>
          <li>
            <a href="#">Niveau 8 0</a>
          </li>
          <li>
            <a href="#">Niveau 8 1</a>
          </li>
          <li>
            <a href="#">Niveau 8 2</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#" class="topniv"><span>Niveau 9</span></a>
        <ul>
          <li>
            <a href="#">Niveau 9 0</a>
          </li>
          <li>
            <a href="#">Niveau 9 1</a>
          </li>
          <li>
            <a href="#">Niveau 9 2</a>
          </li>
        </ul>
      </li>
      <li class="topdernier">
        <a href="#" class="topniv"><span>Niveau 10</span></a>
        <ul>
          <li>
            <a href="#">Niveau 10 0</a>
          </li>
          <li>
            <a href="#">Niveau 10 1</a>
          </li>
          <li>
            <a href="#">Niveau 10 2</a>
          </li>
        </ul>
      </li>
    </ul>
  </body>
</html>


a+
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
Hello,

voici un proto. Est-ce que ca répond à ton besoin ? si non, merci de préciser et de faire... un croquis ;)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
      $(function(){
        $(document).click(function(e){
          var target = e.target;
          var parents = $(target).parents('div');
          if($('#ship-options-container').attr('class') == 'active'){
            var selectBlur = false;
            $.each(parents, function(index, value) {
              if($(value).attr('class') == 'select-menu'){
                selectBlur = true;
                return false;
              }
            });
            if(!selectBlur){
              $('#ship-options-container').fadeOut().removeClass('active');
            }
          }
        });
        $(document.body).click(function(e){
            var el= e.target||event.srcElement;
            if($(el).attr('class') == 'dropdown-arrow' || $(el).attr('class') == 'select-container' || $(el).attr('class') == 'ship-name'){
              $('#ship-options-container').fadeIn();
              $('#ship-options-container').addClass('active');
            }
        });

        $('.select-list').click(function(){
          $('.ship-options-container').fadeIn().end().addClass('active');
        });

        $('.select-menu li').click(function(){
          if($(this).attr('class') == 'selected'){
            $(this).removeClass('selected');
            var lastTotal = parseInt($('#totalCost').text());
            var optionCost = parseInt($(this).find('.cost').text());
            $('#totalCost').html(lastTotal - optionCost);
          }else{
            $(this).addClass('selected');
            var lastTotal = parseInt($('#totalCost').text());
            var optionCost = parseInt($(this).find('.cost').text());
            $('#totalCost').html(lastTotal + optionCost);
          }
        });
      });
    </script>
    <link href='http://fonts.googleapis.com/css?family=Almendra+SC' rel='stylesheet' type='text/css'>
    <style type="text/css">
      body{
        background-color:#ccc;
      }
      .select-menu{
        position:relative;
        width:280px;
        background:url('http://t0.gstatic.com/images?q=tbn:ANd9GcTEfpnpSpnpSW11YudQ9aHwYA2HORT-4JigKLyDWYBhOoE2z0ywcJrxmXs') no-repeat;
        background-color:#333;
        height:107px;
        color:white;
        text-align:left;
        font-family: 'Almendra SC', serif;
        cursor:pointer;
        -webkit-box-shadow:0px 2px 5px #333333;
        -moz-box-shadow:0px 2px 5px #333333;
        -o-box-shadow:0px 2px 5px #333333;
        box-shadow:0px 2px 5px #333333;
      }
      .select-menu:hover{
        background-color:#666;
      }
      .ship-name{
        padding-top:80px;
        padding-left:10px;
        width:234px;
        float:left;
      }
      .dropdown-arrow{
        float:left;
        padding-top:45px;
        padding-left:10px;
      }
      .select-container{
        height:107px;
      }
      .options-container{
        position:relative;
      }
      #ship-options-container{
        position:absolute;
        width:280px;
        left:0;
        top:0;
        list-style:none;
        padding:0;
        margin:0;
        display:none;
        -webkit-box-shadow:0px 2px 5px #333333;
        -moz-box-shadow:0px 2px 5px #333333;
        -o-box-shadow:0px 2px 5px #333333;
        box-shadow:0px 2px 5px #333333;
      }
      .select-menu ul li{
        background-color:#232323;
        color:white;
        border-bottom:#777 solid 1px;
        height:20px;
        padding:3px;
        cursor:pointer;
        -webkit-transition: all .3s ease-in;
        -moz-transition: all .3s ease-in;
        -o-transition: all .3s ease-in;
        transition: all .3s ease-in;
      }
      .select-menu ul li img{
        margin-right:10px;
      }
      .cost-string{
        float:right;
      }
      .option-name, img{float:left;}
      .select-menu ul li.selected{
        color:green;
      }
      .select-menu ul li:hover{
        background-color:#343434;
      }
    </style>
  </head>
  <body>
    <div id="total">
      <h2>Cout total: <span id="totalCost">0</span> $</h2>
    </div>
    <div class="select-menu">
      <div class="select-container">
        <div class="ship-name">
          Épave volante
        </div>
        <div class="dropdown-arrow">
          ?
        </div>
      </div>
      <div class="options-container">
        <ul id="ship-options-container">
          <li>
            <img src="http://lorempixel.com/20/20/abstract"/>
            <div class="option-name">
              Pilote manchot
            </div>
            <div class="cost-string">
              <span class="cost">
                12
              </span>
              $
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/20/20/food/"/>
            <div class="option-name">
              Réacteur défaillant
            </div>
            <div class="cost-string">
              <span class="cost">
                105
              </span>
              $
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/20/20/people"/>
            <div class="option-name">
              Réservoir troué
            </div>
            <div class="cost-string">
              <span class="cost">
                62
              </span>
              $
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/20/20/sports/"/>
            <div class="option-name">
              Ailes endommagées
            </div>
            <div class="cost-string">
              <span class="cost">
                18
              </span>
              $
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/20/20/animals"/>
            <div class="option-name">
              Canons usés
            </div>
            <div class="cost-string">
              <span class="cost">
                185
              </span>
              $
            </div>
          </li>
          <li>
            <img src="http://lorempixel.com/20/20/fashion"/>
            <div class="option-name">
              Roues crevées
            </div>
            <div class="cost-string">
              <span class="cost">
                218
              </span>
              $
            </div>
          </li>
        </ul>
      </div>
    </div>
    
  </body>
</html>
Messages postés
330
Date d'inscription
lundi 29 novembre 2010
Statut
Membre
Dernière intervention
13 juillet 2014
14
Euh non une liste déroulante de formulaire

http://www.sdz-files.com/cours/html-css/p4/ch2/liste_deroulante/
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
Une liste qui contient d'autres listes déroulantes ?!?

Je vais pas m'amuser a passer 3h sur ce topic. Soit tu explique clairement ce que tu recherches, soit je passe à autre chose.
Messages postés
330
Date d'inscription
lundi 29 novembre 2010
Statut
Membre
Dernière intervention
13 juillet 2014
14
Alors c'est une calculatrice spécial qui permet de calculer le prix du vaisseau et des items il y'a dpnc pour choisir le vaisseau une liste déroulante
pour choisir l'item 1 une autre liste
litem 2 une autre liste
etc
etc

Sauf que pour selectionner le vaisseau dans la première liste déroulante je voudrais plutot que de mettre le nom du vaisseau mettre une image du vaisseau

Quand on arrive sur la calculatrice on clique sur le premier menu déroulant et la liste des vaisseau en image s'affiche y'a plus qua cliqué sur le vaisseau que l'on veut pour le choisir
Messages postés
1189
Date d'inscription
dimanche 7 octobre 2007
Statut
Membre
Dernière intervention
12 juin 2020
428
La liste que je te propose te permet de sélectionner plusieurs options en 1 seule liste déroulante, avec calcul du prix, et une image du vaisseau.

Qu'est-ce qui ne va pas dans tout ça ?
Messages postés
330
Date d'inscription
lundi 29 novembre 2010
Statut
Membre
Dernière intervention
13 juillet 2014
14
Ah oui excuse moi je n'avait pas vue ton deuxieme script

c'est exactement ce qu'il me faut merci
Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
OK

alors c est pas tres standard et ca peux poser des problemes sur certain fureteur ?? mais c est faisable ,

1 :tu donne une class a chacune des options

2 : en css tu donne une image de background a chaqune des class



exemple
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>
      RAD ZONE Webcreation
    </title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*<![CDATA[*/
     option {
    min-height: 12px ;    /* hauteur des images */
    padding-left: 15px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: left center;
    }
    option.gros_bateau {
    background-image: url(gros_bateau.gif);
    }
    option.petit_bateau {
    background-image: url(petit_bateau.gif);
    }

    /*]]>*/
    </style>
  </head>
  <body>
    <form method="post" action="">
      <p>
        <label for="choix">Quel choix ?</label>
        <br />
        <select name="choix" id="choix">
          <option value="gros bateau" class="gros_bateau">
            gros bateau
          </option>
          <option value="petit bateau" class="petit_bateau">
            petit bateau
          </option>
        </select>
      </p>
    </form>
  </body>
</html>

Messages postés
5252
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
19 avril 2020
1 320
OK j avais meme pas vue ta reponse ;-))