web-dev-qa-db-fra.com

Menu déroulant sélectionner avec des images

Je voulais créer une liste déroulante qui contient des images plutôt que du texte. J'ai fait quelques recherches sur Google et une recherche ici sur Stack Overflow, et la réponse généralement donnée consiste à utiliser la liste déroulante jQuery .

Le problème avec cette solution, il me semble, est que vous devez fournir un texte. Il semble que les images ne sont que des icônes qui accompagnent ce texte à gauche. Corrigez-moi si je me trompe, mais cette solution ne couvre pas ce que j'essaie de faire: remplacer complètement le texte par des images.

Quelques informations sur ce que j'essaie de faire - J'essaie de créer un menu déroulant pour que les utilisateurs sélectionnent l'épaisseur de trait sur une application de peinture/griffonnage en ligne. Les images seraient des lignes de différentes épaisseurs, un peu comme mspaint.

javascriptjqueryhtmlcss
35
bgcode

Vérifiez cet exemple .. tout a été fait facilement http://jsfiddle.net/GHzfD/

EDIT: Mis à jour/en vigueur le 02 juillet 2013: jsfiddle.net/GHzfD/357

#webmenu{
    width:340px;
}

<select name="webmenu" id="webmenu">
    <option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
    <option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
    <option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
    <option value="email"  selected="selected" title="http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png"></option>
    <option value="faq" title="http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png"></option>
    <option value="games" title="http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif"></option>
</select>

$("body select").msDropDown();
26
Ashraf

Vous n'avez même pas besoin de javascript pour le faire!

J'espère que cela vous a intrigué alors voilà. Tout d'abord, la structure html:

<div id="image-dropdown">
    <input type="radio" id="line1" name="line-style" value="1" checked="checked" />
    <label for="line1"></label>
    <input type="radio" id="line2" name="line-style" value="2" />
    <label for="line2"></label>
    ...
</div>

Whaaat? Boutons radio? Correct. Nous leur donnerons l'apparence d'une liste déroulante avec des images, car c'est ce que vous recherchez! L'astuce consiste à savoir que lorsque les étiquettes sont correctement liées aux entrées (cet attribut et l'identifiant de l'élément cible), l'entrée devient implicitement active; cliquez sur une étiquette = cliquez sur un bouton radio. Voici un css légèrement abrégé avec des commentaires en ligne:

#image-dropdown {
    /*style the "box" in its minimzed state*/
    border:1px solid black; width:200px; height:50px; overflow:hidden;
    /*animate the dropdown collapsing*/
    transition: height 0.1s;
}
#image-dropdown:hover {
    /*when expanded, the dropdown will get native means of scrolling*/
    height:200px; overflow-y:scroll;
    /*animate the dropdown expanding*/
    transition: height 0.5s;
}
#image-dropdown input {
    /*hide the nasty default radio buttons!*/
    position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label {
    /*style the labels to look like dropdown options*/
    display:none; margin:2px; height:46px; opacity:0.2; 
    background:url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;}
#image-dropdown:hover label{
    /*this is how labels render in the "expanded" state.
     we want to see only the selected radio button in the collapsed menu,
     and all of them when expanded*/
    display:block;
}
#image-dropdown input:checked + label {
    /*tricky! labels immediately following a checked radio button
      (with our markup they are semantically related) should be fully opaque
      and visible even in the collapsed menu*/
    opacity:1 !important; display:block;
}

Exemple complet ici: http://jsfiddle.net/NDCSR/1/

NB1: vous devrez probablement l’utiliser avec position: absolute dans un conteneur avec la position: relative + high z-index.

NB2: lors de l'ajout d'arrière-plans pour des styles de ligne individuels, envisagez d'utiliser les sélecteurs en fonction de l'attribut "for" de l'étiquette, comme suit:

label[for=linestyle2] {background-image:url(...);}
50
o.v.

On dirait qu'un menu HTML simple serait plus simple. Utilisez les attributs de données html5 pour les valeurs ou la méthode de votre choix et css pour gérer les images en tant qu'arrière-plan ou les placer dans le code HTML même.

Edit: Si vous êtes obligé de convertir un fichier de sélection existant dont vous ne pouvez vous débarrasser, il existe également de bons plugins permettant de modifier un fichier de sélection en HTML. Wijmo et Chosen sont un couple qui me vient à l'esprit

4
charlietfl

Si vous y réfléchissez, le concept d'un menu déroulant est assez simple. Pour ce que vous essayez d'accomplir, un simple <ul> fera l'affaire.

<ul id="menu">
    <li>
        <a href="#"><img src="" alt=""/></a> <!-- Selected -->
        <ul>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
            <li><a href="#"><img src="" alt=""/></a></li>
        </ul>
    </li>
</ul>

Vous l'appelez avec css et ensuite quelques jQuery simples feront l'affaire. Je n'ai pas essayé cette tho:

$('#menu ul li').click(function(){
    var $a = $(this).find('a');
    $(this).parents('#menu').children('li a').replaceWith($a).
});
3
elclanrs

JAVASCRIPT PLAIN:

DEMO: http://codepen.io/tazotodua/pen/orhdp

var shownnn = "yes";
var dropd = document.getElementById("image-dropdown");

function showww() {
  dropd.style.height = "auto";
  dropd.style.overflow = "y-scroll";
}

function hideee() {
    dropd.style.height = "30px";
    dropd.style.overflow = "hidden";
  }
  //dropd.addEventListener('mouseover', showOrHide, false);
  //dropd.addEventListener('click',showOrHide , false);


function myfuunc(imgParent) {
  hideee();
  var mainDIVV = document.getElementById("image-dropdown");
  imgParent.parentNode.removeChild(imgParent);
  mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]);
}
#image-dropdown {
  display: inline-block;
  border: 1px solid;
}
#image-dropdown {
  height: 30px;
  overflow: hidden;
}
/*#image-dropdown:hover {} */

#image-dropdown .img_holder {
  cursor: pointer;
}
#image-dropdown img.flagimgs {
  height: 30px;
}
#image-dropdown span.iTEXT {
  position: relative;
  top: -8px;
}
<!-- not tested in mobiles -->


<div id="image-dropdown" onmouseleave="hideee();">
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs first" src="http://www.google.com/tv/images/socialyoutube.png" /> <span class="iTEXT">First</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/fiabee.png" /> <span class="iTEXT">Second</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/tv/images/lplay.png" /> <span class="iTEXT">Third</span>
  </div>
  <div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
    <img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/cloudprintlite.png" /> <span class="iTEXT">Fourth</span>
  </div>
</div>

3
T.Todua

Ceci utilise ms-Dropdown: https://github.com/marghoobsuleman/ms-Dropdown

Mais la ressource de données est JSON. 

Exemple: http://jsfiddle.net/tcibikci/w3rdhj4s/6

HTML

<div id="byjson"></div>

Scénario

<script>
        var jsonData = [
            {description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
            {image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
            {image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
            {image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
            {image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
            {image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
            {image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
        ];
        $("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
    }
</script>
0
Tolga

Je suis un peu en retard sur ce point, mais vous pouvez le faire en utilisant un simple menu déroulant d’amorçage, puis modifiez votre code en sélectionnant un événement de changement dans n’importe quel langage ou framework. (Ceci est juste une solution très basique, pour d'autres personnes comme moi qui débutent et cherchent une solution pour un petit projet simple.)

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Select Image
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
        <li role="separator" class="divider"></li>
        <li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
    </ul>
</div>
0
Devanshi Parikh

Utilisez la liste déroulante et ajoutez le css suivant .ddTitleText{ display : none; }

Pas plus de texte, juste des images.

0
Fresheyeball