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
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
A voir également:
- Comment faire un menu déroulant en images ?
- Menu déroulant excel - Guide
- Menu démarrer windows 11 - Guide
- Excel menu déroulant en cascade - Guide
- Canon quick menu - Télécharger - Utilitaires
- Menu contextuel windows 11 - Guide
12 réponses
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
28 déc. 2011 à 23:14
Hello,
es-tu encore en ligne ? Je m'y colle maintenant si tu es là.
es-tu encore en ligne ? Je m'y colle maintenant si tu es là.
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
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
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
Modifié par prosthetiks le 29/12/2011 à 16:54
Tu arrive a faire un croquis (genre wireframe) de ce que tu souhaites vraiment stp ?
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
29 déc. 2011 à 17:08
Oui je peut mais c'est tout simplement remplacer le texte a selectionné par une image ^^
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
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 ?
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
29 déc. 2011 à 17:37
oui mais y'en n'aura que 10 en faite
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
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 ?
Il ne vaudrait pas mieux un seul menu avec plusieurs options sélectionnables à l'intérieur ?
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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 !)
a+
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+
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
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 ;)
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>
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
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/
http://www.sdz-files.com/cours/html-css/p4/ch2/liste_deroulante/
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
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.
Je vais pas m'amuser a passer 3h sur ce topic. Soit tu explique clairement ce que tu recherches, soit je passe à autre chose.
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
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
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
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
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 ?
Qu'est-ce qui ne va pas dans tout ça ?
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
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
c'est exactement ce qu'il me faut merci
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
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
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>
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
29 déc. 2011 à 22:37
OK j avais meme pas vue ta reponse ;-))