• logo categorie
    RESOLU

    Tutoriel : Faire une liste déroulante (<select>) avec des icônes différentes sur chaque entrées (<option>)


    Hello tout le monde!!

    Me revoilà pour mon deuxième tutoriel!!
    Avec comme question, comment faire une jolie liste déroulante en HTML/CSS/JS avec des icônes différentes sur chaque entrées.
    Eh NON, ça n'est pas possible en HTML, et c'est bien dommage!!
    Et OUI, ça peut être utile pour... Imaginons... Une liste de pays avec leurs drapeaux pour le choix des langues sur votre site web.

    La suite dans ma réponse!
    Webmasters - Développement web
    Général Conception Web
    HTML / DHTML / XHTML
    JavaScript
    HTML
    liste non ordonées
    liste à puces
    liste déroulante
    liste des langues
    utilisateur
    Dr. Dino
    Posté le : 27 Août à 15:36
    155 529 vues

  • 47
    Dr. Dino
    Posté le : 27 Août à 15:44
    Eh bien pour ça, on aura besoin de trois fichiers : un fichier html (index.html) et son fichier css (style.css), et d'un fichier JS (liste.js).

    Pour notre fichier HTML, rien de plus simple, on inclue notre fichier CSS, on pond notre liste déroulante sous forme de select, puis on inclue notre fichier JS, ce qui donne :
    index.html
    <link rel="stylesheet" href="style.css" />
    <div data-info="info8" class="info" id="select-language">
    	<select>
    		<option value="fr" data-image="images/drapeau-fr.png" selected>Français</option>
    		<option value="en" data-image="images/drapeau-en.png">English</option>
    		<option value="de" data-image="images/drapeau-de.png">Deutch</option>
    		<option value="es" data-image="images/drapeau-es.png">Espanol</option>
    	</select>
    </div>
    <script type="text/javascript" src="liste.js"></script>


    Puis notre fichier css :
    style.css
    select{
    color:#666;
    border:1px solid #ccc;
    font-size:14px;
    padding:6px 8px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    width:317px;
    background-color:#f8f8f8;
    }
    #select-language{
    width:317px;
    }
    .div_option{
    color:#666;
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-bottom:1px solid #ccc;
    font-size:14px;
    padding:6px 8px;
    width:317px;
    height:26px;
    background-color:#f8f8f8;
    background-repeat:no-repeat;
    background-position:10px center;
    padding-left:30px;
    }
    .div_option:hover{
    color:white;
    background-color:#86c440;
    cursor:pointer;
    }
    .div_aff_option{
    color:#666;
    border:1px solid #ccc;
    font-size:14px;
    padding:6px 8px;
    width:317px;
    height:26px;
    background-color:#f8f8f8;
    background-repeat:no-repeat;
    background-position:10px center;
    padding-left:30px;
    }
    .div_aff_option:hover{
    cursor:pointer;
    }
    .arrow_down_select{
    width:21px;
    height:21px;
    left:329px;
    position:relative;
    top:34px;
    }
    .arrow_down_select:hover{
    cursor:pointer;
    }


    Et notre fichier JS :
    liste.js
    $("#select-language").append("<img class='arrow_down_select' src='images/arrow_down_alt1_32x32.png'>");
    $("#select-language").find("select").hide();
    $("#select-language").find("select option").each(function() {
    	var html = "<div id='select-aff-" + $(this).val() + "' style='background-image: url(\"" + $(this).data("image") + "\");display: none;' class='div_aff_option'><span class='txt-select'>" + $(this).html() + "</span></div>";
    	$("#select-language").append(html);
    });
    $("#select-language").find("select option").each(function() {
    	var html = "<div id='select-" + $(this).val() + "' style='background-image: url(\"" + $(this).data("image") + "\");display: none;' class='div_option' data-val='" + $(this).val() + "'><span class='txt-select'>" + $(this).html() + "</span></div>";
    	$("#select-language").append(html);
    });
    $("#select-language").find("select option:selected").each(function() {
    	$("#select-language").find($("#select-aff-" + $(this).val())).addClass("selected");
    	$("#select-aff-" + $(this).val() + ":first").show();
    });
    $(".div_aff_option").on("click", function() {
    	$(".div_option").toggle("fast");
    });
    $(".arrow_down_select").on("click", function() {
    	$(".div_option").toggle("fast");
    });
    $(".div_option").on("click", function() {
    	$(".div_aff_option").hide();
    	$("#select-aff-" + $(this).data("val")).show();
    	$('#select-language option:selected').removeAttr('selected');
    	$("#select-language option[value='" + $(this).data("val") + "']").attr('selected','selected');
    	$(".div_option").toggle();
    });
    $("#select-language").on("mouseleave", function() {
    	$(".div_option").hide("fast");
    });


    Un petit bout d'explication : ligne 1 on ajoute une image qui permettras de déployer la liste déroulante, je vous conseille d'utiliser une flèche vers le bas, c'est l'usage ;). Ligne 3 et 7, on parcourt chaque élément pour ajouter les icônes personnalisées précisées dans le data-image des <option>. Ligne 11, on définit l'élément sélectionné par défaut. Ligne 15 et 18, on gère le comportement déroulant de la liste. Et enfin ligne 21, on gère le comportement de la liste quand un nouvel élément est sélectionné.

    Et voilà votre nouvelle liste, peut-être un petit peu compliqué pour une liste déroulante, mais c'est ce que vous demandiez, alors le tour est joué!
    Merci Dr. Dino!
  • 0
    mrmi11
    Posté le : 8 Juillet à 18:10
    Merci !
  • ⇒ Si vous êtes ici c'est que le sujet vous intéresse ^^
    Inscrivez-vous sur Oyant, apportez votre contribution sur ce sujet et gagnez de l'argent :

    Inscription
    Répondre
  • logo categorie
    RESOLU

    Kiosque et stand

    Bonjour
    Kiosque et stand sont la même chose?
    Vie pratique
    Kiosque
    Stand
  • logo categorie
    RESOLU

    Temps de sommeil du chat ?

    Bonjour à tous!

    Je trouve que mon chat dort beaucoup!
    Pouvez-vous me dire combien de temps un chat dort-il en moyenne par jour ?!
    Merci d'avance
    Animaux
    Chats
    animaux
    chat
    sommeil
  • logo categorie

    Comment modifier l'url de ma page en PHP ?

    Salut !

    Je suis actuellement de faire un formulaire en HTML et en PHP. De ce fait, j'aimerais pouvoir renvoyer la page du formulaire si les mots de passe entrés ne sont pas égaux.

    Merci d'avance !
    PHP
    PHP
  • logo categorie
    RESOLU

    "Navire" et "paquebot"

    Salut
    Avez vous une idée sur la différence entre navire et paquebot?
    Langues
    Navire
    Paquebot
  • logo categorie
    RESOLU

    Angleterre et Royaume-Uni

    Bonjour
    Est-ce que l'Angleterre et Royaume-Uni sont le même endroit?
    Divertissement
    Angleterre
    Royaume-Uni
  • logo categorie
    RESOLU

    La différence entre vague et houle

    Bonjour
    La différence entre vague et houle?
    Langues
    Vague
    Houle
  • logo categorie
    RESOLU

    Faire la différence entre un marbre et un granite

    Bonjour
    Comment faire la différence entre un marbre et un granite?
    Vie pratique
    Marbre
    Granite
  • logo categorie
    RESOLU

    Tutoriel : Upload de fichiers en javascript

    Hello tout le monde!

    Comme vous vous le demandez sans doute puisque vous êtes tombés sur cette page, je vais vous expliquer dans ce tutoriel comment uploader un document sur votre serveur (images, vidéos et autres) en javascript, c'est à dire, sans aucuns rechargement de pages, ET, le + majeur, le pouce en l'air, la cerise sur le gâteau, avec une barre de progression lors de l'upload!

    La suite dans ma réponse!
    Webmasters - Développement web
    AJAX
    CSS
    Général Conception Web
    HTML / DHTML / XHTML
    JavaScript
    tutoriel
    upload
    javascript
    barre de progression
    images
  • logo categorie
    RESOLU

    La différence entre Siren et Siret

    Salut
    La différence entre Siren et Siret?
    Entreprise
    Siren
    Siret
  • logo categorie
    RESOLU

    La différence entre eori et immatriculation TVA

    Bonjour
    La différence entre eori et immatriculation TVA?
    Merci d'avance.
    Entreprise
    Eori
    Immatriculation
  • logo categorie
    RESOLU

    La différence entre impôt et taxe

    Salut
    J'ai besoin de la différence entre impôt et taxe?
    Entreprise
    Impôt
    Taxe
  • logo categorie
    RESOLU

    La différence entre consultant et conseiller

    Bonjour
    Quelle est la différence entre consultant et conseiller?
    Vie pratique
    Consultant
    Conseiller
  • logo categorie
    RESOLU

    La différence entre clôture et palissade

    Bonjour
    Quelle est la différence entre clôture et palissade?
    Langues
    Clôture
    Palissade
  • logo categorie
    RESOLU

    La différence entre honnête et intègre

    Bonjour
    La différence entre honnête et intègre?
    Langues
    Honnête
    Intègre
  • logo categorie
    RESOLU

    La différence entre langue et langage

    Bonjour
    J'arrive pas à faire la différence entre langue et langage?
    Langues
    Langue
    Langage
  • logo categorie
    RESOLU

    Différence entre analphabète et illettré

    Bonjour
    S'il vous plaît, y a-t-il une différence entre analphabète et illettré?
    Enseignement
    Illettré
    Analphabète
  • logo categorie
    RESOLU

    La différence entre transport et logistique

    Salut
    La différence entre transport et logistique, s'il vous plait?
    Entreprise
    Transport
    Logistique
  • logo categorie
    RESOLU

    Hôtel et auberge

    Bonjour
    Je veux savoir si un hôtel est mieux qu'une auberge?
    Vie pratique
    Hôtel
    Auberge
  • logo categorie

    Haut-de-forme au pluriel ?!

    Bonjour!

    Pourriez-vous me dire comment écrire haut-de-forme au pluriel s'il vous plaît ?!
    Merci
    Culture
    Langues
    Langue française
    haut-de-forme
    pluriel
  • logo categorie
    RESOLU

    Comment vérifier qu'une valeur est bien dans mon tableau ?

    Bonjour,

    J'aimerais vérifier que ma variable est bien dans mon tableau, quelle fonction dois-je utiliser ?
    PHP
    PHP
    Fonction
  • Veuillez vous connecter pour profiter pleinement de toutes les fonctionnalités de Oyant.
    Connexion
    Inscription

    Poster une question

    AnimauxApplicationsArnaquesAutres langagesBases de donnéesBeauté et ModeC et C++Cartes de voeux, lettres, poèmes et discoursCMS (Système de gestion de contenu)CollectionCuisineCultureDémarches administrativesDivertissementDotnetDroitEmploiEmploi et études en informatiqueEnseignementEntrepriseEnvironnementEvénementsFinanceGénéral développementImmobilier, logement et urbanisme    JavaLanguesLogicielsMétiersNouvelles technologiesPHPPrestations socialesRéservé aux adultesSantéSportSystèmesTransportsVie pratiqueWebmasters - Développement web 3.056 Utlisateurs parcourent Oyant en ce moment