Comment faire un menu déroulant en images ?

Résolu
smikpaf Messages postés 330 Date d'inscription   Statut Membre Dernière intervention   -  
RAD ZONE Messages postés 5230 Date d'inscription   Statut Contributeur Dernière intervention   -
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   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention   16
 
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   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention   16
 
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   Statut Membre Dernière intervention   431
 
"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   Statut Membre Dernière intervention   16
 
oui mais y'en n'aura que 10 en faite
0
prosthetiks Messages postés 1189 Date d'inscription   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention   16
 
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 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention   16
 
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   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention   16
 
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   Statut Membre Dernière intervention   431
 
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   Statut Membre Dernière intervention   16
 
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 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
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 5230 Date d'inscription   Statut Contributeur Dernière intervention   1 360
 
OK j avais meme pas vue ta reponse ;-))
0

Discussions similaires

Suppression listes déroulantes
Archa -
Sam -

5 réponses
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
supprimer une liste déroulante
fred94 -
m@rina -

3 réponses