Sujet Précédent Sujet Suivant

Comment faire un menu déroulant en images ?

Résolu/Fermé
smikpaf Messages postés 330 Date d'inscription lundi 29 novembre 2010 Statut Membre Dernière intervention 13 juillet 2014 - 28 déc. 2011 à 20:08
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 - 29 déc. 2011 à 22:37
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

A voir également:

12 réponses

Réponse 1 / 12
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
28 déc. 2011 à 23:14
Hello,

es-tu encore en ligne ? Je m'y colle maintenant si tu es là.
0
Réponse 2 / 12
smikpaf Messages postés 330 Date d'inscription lundi 29 novembre 2010 Statut Membre Dernière intervention 13 juillet 2014 16
29 déc. 2011 à 16:47
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
0
Réponse 3 / 12
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
Modifié par prosthetiks le 29/12/2011 à 16:54
Tu arrive a faire un croquis (genre wireframe) de ce que tu souhaites vraiment stp ?
0
Réponse 4 / 12
smikpaf Messages postés 330 Date d'inscription lundi 29 novembre 2010 Statut Membre Dernière intervention 13 juillet 2014 16
29 déc. 2011 à 17:08
Oui je peut mais c'est tout simplement remplacer le texte a selectionné par une image ^^
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 déc. 2011 à 17:23
"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 ?
0
smikpaf Messages postés 330 Date d'inscription lundi 29 novembre 2010 Statut Membre Dernière intervention 13 juillet 2014 16
29 déc. 2011 à 17:37
oui mais y'en n'aura que 10 en faite
0
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 déc. 2011 à 17:38
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 ?
0
smikpaf Messages postés 330 Date d'inscription lundi 29 novembre 2010 Statut Membre Dernière intervention 13 juillet 2014 16
29 déc. 2011 à 17:57
euh non excuse moi je me suis mal exprimé c'est un seul menu composé de 10 liste déroulantes
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 12
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 déc. 2011 à 20:06
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+
0
Réponse 6 / 12
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 déc. 2011 à 21:37
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>
0
Réponse 7 / 12
smikpaf Messages postés 330 Date d'inscription lundi 29 novembre 2010 Statut Membre Dernière intervention 13 juillet 2014 16
29 déc. 2011 à 21:39
Euh non une liste déroulante de formulaire

http://www.sdz-files.com/cours/html-css/p4/ch2/liste_deroulante/
0
Réponse 8 / 12
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 déc. 2011 à 21:42
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.
0
Réponse 9 / 12
smikpaf Messages postés 330 Date d'inscription lundi 29 novembre 2010 Statut Membre Dernière intervention 13 juillet 2014 16
29 déc. 2011 à 22:04
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
0
Réponse 10 / 12
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
29 déc. 2011 à 22:06
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 ?
0
Réponse 11 / 12
smikpaf Messages postés 330 Date d'inscription lundi 29 novembre 2010 Statut Membre Dernière intervention 13 juillet 2014 16
29 déc. 2011 à 22:19
Ah oui excuse moi je n'avait pas vue ton deuxieme script

c'est exactement ce qu'il me faut merci
0
Réponse 12 / 12
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 déc. 2011 à 22:33
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>
0
RAD ZONE Messages postés 5224 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 22 mars 2024 1 353
29 déc. 2011 à 22:37
OK j avais meme pas vue ta reponse ;-))
0

Discussions similaires

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

9 réponses
calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses