• Mettre une liste déroulante dans un article

    Il peut être interessant de placer au sein d'un article une liste déroulante dont chaque ligne aura une action spécifique comme l'exemple ci-dessous :

    Vous pouvez aussi placer ce type de liste dans un module pour faire un accès rapide vers différentes pages de votre blog.

    Remarque: Il faut que le javascript soit activé sur votre blog pour que cela fonctionne

    Pour arriver à ce résultat, rien de plus simple:
    1 - Copier le code ci-dessous
    2- Editer votre article ou votre module simple
    3- Cliquez sur Editer le code source HTML (en mode normal ou expert)
    4- Collez le code
    5- Modifiez le contenu de la liste et les liens

    CODE

    <p><select name="menu_destination" onchange="window.open(this.value)">

           <optgroup label="Le Karat&eacute; Club Nieppois" >
                      <option value="http://kcn.eklablog.com/baby-karate-p144525">Baby Karat&eacute;</option>
                      <option value="http://kcn.eklablog.com/body-karate-p144557">Body Karat&eacute;</option>
                      <option value="http://kcn.eklablog.com/les-horaires-p144443">Horaires</option>
                      <option value="http://kcn.eklablog.com/les-tarifs-p144445">Tarifs</option>
           </optgroup>
           <optgroup label="Galleries">
                      <option value="http://papasti.info/gallery3/">Les Photos</option>
                      <option value="http://kcn.eklablog.com/videos-p165503">Vid&eacute;os du Club</option>
                      <option value="http://kcn.eklablog.com/telechargements-p157868">T&eacute;l&eacute;chargements</option>
            </optgroup> &lt;
    </select></p>

     

    Fonctionnement

    La balise HTML Select définit votre liste déroulante.
    La balise optgroup vous permet de regrouper les éléments et la balise option définit vos différentes lignes.

    Lorsque l'on choisit un élément de la liste, la fonction javascript window.open est appelée et reçoit comme argument la valeur contenue dans value (ici des liens).

    Adaptations

    Vous pouvez bien entendu modifier les attributs de style de la balise <select> comme ci dessous

    <p><select style="color: black; background-color: wheat; width: 100%; border-color: lightgray; border-style: ridge; border-width: 8px;" name="menu_destination" size="5" onchange="test(this.value)">

     

     

    Il est également possible d'utiliser cette balise pour d'autres choses comme ci-dessous.
    (vous pouvez retrouver les noms et codes couleurs sur:

    http://www.w3schools.com/html/html_colornames.asp

     

    « Référencer efficacement son blog Eklablog sur GoogleRotation d'un Div en CSS »

  • Commentaires

    60
    Jeudi 3 Décembre 2015 à 22:12

    bonsoir j aimerai de l aide comment faire pour mettre mes liens à la place des tiens?merci

    moi j ai des liens comme ça:http://la-valise-a-images.eklablog.com/barres-de-separation-c27122364

    59
    Samedi 24 Janvier 2015 à 18:53

    Bonsoir

    Moi je travaille sur mac et je viens d'essayer ça ne marche pas avec Safari, par contre sur Firefox ça marche, alors comment faire ?

    Merci pour la réponse bonne soirée

     

    58
    Jeudi 18 Décembre 2014 à 18:09

    Bonjour et mille fois bravo . j'ai utilsé ton code ça marche sauf que le petit triangle noir n'apparait pas. tu peux m'aider stp? merci.

    http://laghouatmavillenatale.eklablog.com

    57
    Jeudi 24 Octobre 2013 à 12:40

    Merci, c'est exactment ce que je souhaitais

    bonne journée

    56
    Mercredi 23 Octobre 2013 à 16:09

    @chevrette13,

    Il te suffit de mettre ton titre dans la première <option> sans mettre de valeur à value. Exemple:

    <option>Titre de la boite</option>

    55
    Mercredi 23 Octobre 2013 à 15:38

    bonjour, j'ai essayé le code de la boite mais j'ai un problème, je voudrai que reste en vue mon titre de la boite à savoir mes favoris et non un des liens de la boite

    comment faire

    merci

    54
    Dimanche 9 Septembre 2012 à 12:35

    Bonjour,

    Comment cela fontionne-t-il avec des "ancres" de la même page ?

    Merci d'avance

    53
    garbawi Profil de garbawi
    Mardi 4 Septembre 2012 à 17:07

    merci beaucoup !!!! :)

    52
    Mardi 4 Septembre 2012 à 16:55

    C'est corrigé ^^

    Je te ferai prochainement un code qui te permettra de modifier sans souci.

    51
    garbawi Profil de garbawi
    Mardi 4 Septembre 2012 à 16:43

    Bonjour Papasti, j'espére que ton été c'est bien passé, vacances ou pas encore? je me retourne vers toi car j'ai fait une modif dans mes menus, résultat le code HTML ne fonctionne plus pour créer les liste déroulantes du même menu !!!! J'ai enlevé en fait du menu principal a gauche la rubrique " Voyage aux usa". Que je veux integrer a la rubrique "ailleurs dans le monde" de ce même menu. Pourrait tu m'aider a remettre le code a jour? je ne touche plus a rien !!!!! lol

     

    merci beaucoup, ps: tu as toujours accés a mon blog!

    garbawi

    50
    Dimanche 10 Juin 2012 à 19:27

    Je vais essayer, merci ! :)

    49
    Samedi 9 Juin 2012 à 18:07

    Remplaces dans le select le onchange="test(this.value)" par onchange="window.open(this.value)"

    Je vais corriger le tuto pour ça, c'est plus simple.

    48
    Samedi 9 Juin 2012 à 17:57

    Je te donne le lien : 

    http://akumi-graph.xooit.fr/index.php

    Dans le message d'accueil. :)

    47
    Samedi 9 Juin 2012 à 13:32

    Bonjour Yusumi,

    Tu peux mettre comme lien n'importe quel lien de page valide. Tu peux donc mettre des liens qui pointent sur des pages de forum.

    Mais où veux-tu mettre ce code ?

    46
    Samedi 9 Juin 2012 à 11:40

    Bonjour et excusez-moi du dérangement. 

    J'aimerais savoir si c'est possible de mettre des liens dans ce HTML pour les forums car j'ai essayer de copier coller le code de mon test dans mon forum mais il ne prends pas les liens. Avez-vous la solution ?

    Merci. 

    • Nom / Pseudo :

      E-mail (facultatif) :

      Site Web (facultatif) :

      Commentaire :


    45
    Mercredi 1er Février 2012 à 08:18
    Merci pour ton commentaire :)
    44
    Asiyou Profil de Asiyou
    Mercredi 1er Février 2012 à 00:59
    Ah ebn voilà ! Très bien expliqué (même moi j'ai compris) En tout cas,c'est super gentil . Moi j'ai installé des menus déroulant en bas de ma page d'accueil mais ça avait été un vrai casse tête,j'avais dû faire un menu sur un générateur (qui ne passait pas sur eklablog) et donc essayer de changer balise par balise pour voir l'effet obtenu et réglé tout ça .

    J'adore le menu déroulant avec la barre de déroulement sur le côté (j'essaierais d'en installer)(pour un plan de site clair où les infos sont regardable en un clin d'oeil)

    Merci aussi pour les étoiles je vais aussi prendre (j'avais un script tout fait comme celui que tu proposes mais les étoiles suivaient mal sous IE)

    Enfin bla bla bla ... Merci beaucoup !C'est vraiment sympa comme initiative (si c'est vrai,pour les larguées comme moi,des petits trucs tout fait avec juste x et y à changer et hop hop voilà) . Surtout que si on cherche un script sur un forum en citant bien "je suis une super bille en langage de toute sorte" auriez vous une petite astuce prémachée s'il vous plait,ben ... Bon je suppose que les grand maestro du langage informatique vivent sous de bien trop beaux cieux pour rester ne serait ce que polis souvent .

    Blabla bla bla ! Désolée et bonne continuation à toi
    43
    Véro37 Profil de Véro37
    Samedi 21 Janvier 2012 à 23:45
    En fait j'ai commencé un menu sur les huiles essentielles et plus ça va plus je rajoute de thèmes dans le menu et il commence à s'allonger c'est pour cela que je souhaiterai mettre un menu déroulant.
    42
    Samedi 21 Janvier 2012 à 20:40
    Que souhaitez vous mettre dans votre liste déroulante ?
    41
    Samedi 21 Janvier 2012 à 20:39
    Que souhaitez vous mettre dans votre liste déroulante ?
    40
    Samedi 21 Janvier 2012 à 20:39
    Que souhaitez vous mettre dans votre liste déroulante ?
    39
    Samedi 21 Janvier 2012 à 20:05
    Bonsoir, je suis novice et je ne comprends pas grand chose. Faut-il taper tous ces codes et que faut-il modifier pour l'adapter à mes rubriques.
    J'ai essayé avec votre exemple mais bien-sûr comme j'ai juste fait un copier coller cela ne me convenait pas. Y a t-il des mots en particulier à changer ? Excusez moi mais le javascript c'est du chinois pour moi. Je vais attendre vos explications avant de réessayer. Bonne soirée
    38
    garbawi Profil de garbawi
    Jeudi 12 Janvier 2012 à 16:17
    Merci Chef! parfait !
    37
    Jeudi 12 Janvier 2012 à 15:47

    Voilà c'est fait 

    36
    garbawi Profil de garbawi
    Jeudi 12 Janvier 2012 à 15:34
    je veux bien aussi le menu dernier article en déroulant...si possible! merci merci merci !
    35
    Jeudi 12 Janvier 2012 à 15:24
    Au survol de la souris + ajout du module "ailleurs dans le monde"
    C'est fait. Tu peux remettre le code pour cacher le module ou veux tu aussi passer le module derniers articles en déroulant ?
    34
    garbawi Profil de garbawi
    Jeudi 12 Janvier 2012 à 15:02
    C'est fait papasti !
    33
    Jeudi 12 Janvier 2012 à 13:35

    Oui c'est bon. Par contre, tu devrais changer la couleur du texte dans les menus. C'est écrit en blanc et on ne voit pas le contenu.

    Peux-tu enlever provisoirement le code suivant pour que je puisse faire la modif ?

    #module_menu101239481
    {
    display:none;
    }
    32
    garbawi Profil de garbawi
    Jeudi 12 Janvier 2012 à 12:08
    Bonjour Papasti , arrive tu à accéder à mon blog sans probléme maintenant ?

    Cordialement,
    Garbawi
    31
    garbawi Profil de garbawi
    Lundi 9 Janvier 2012 à 19:13
    Je t'ai donné la permission d'aller voir mon blog, normalement tu ne devrais plus avoir de soucis.
    30
    Lundi 9 Janvier 2012 à 18:39
    Bonjour Garbawi. Je te souhaite à mon tour une excellente année 2012.
    Pour répondre à tes questions, il faudrait que je puisse de nouveau jeter un oeil sur ton blog. Sauf erreur, il semble que tu l'aies protégé par mot de passe. Pourrais-tu m'envoyer ce mot de passe par message privé ?
    Cela me permettra de voir le code javascript déjà réalisé et ainsi pouvoir le compléter.
    29
    garbawi Profil de garbawi
    Lundi 9 Janvier 2012 à 17:56
    arff et ca y est j'oublie encore des trucs... abuserais je en te demandant si il est possible, comme sur le blog d'Ekriture Modèrne, que la liste se déroule au passage de la souris et non au clic?

    Merci merci merci merci !
    Garbawi
    28
    garbawi Profil de garbawi
    Lundi 9 Janvier 2012 à 17:55
    Bonjour Papasti,

    Tout d'abord je souheterais te souhaiter une bonne année et te remercier pour ton sérieux coup de main sur mon blog. Ca fait du bien de tomber sur des personnes que ca ne dérange pas d'aider les autres.
    Pour le coup pour bien commencer cette nouvelle année, puis je te demander un second service?
    Il y a un module de menu que je souhaiterais ajouter en " menu déroulant" enfin comme le reste de mes modules de menu. Il s'appel "ailleurs dans le monde". Te parais t'il possible de me le rajouter dans le code? ou bien de m'expliquer ce que je dois y rajouter?

    Bien a toi,
    Garbawi
    27
    garbawi Profil de garbawi
    Vendredi 9 Décembre 2011 à 15:14

    Merci beaucoup, je souheterais ajouter la rubrique "ailleurs dans le monde"  !  merci encore

    26
    Vendredi 9 Décembre 2011 à 11:40

    Je regarde ça. 

    Edit: c'est corrigé.

    Pour cacher la rubrique test, tu mets dans le CSS:

    #module_menu101239481
    {
    display:none;
    }

     Et quelle est la rubrique que tu veux ajouter ?

    25
    garbawi Profil de garbawi
    Vendredi 9 Décembre 2011 à 11:16

    arff je viens de voir que ce que j'ai fait à modifié tout ton script .... suis désolé... :s .... peux tu m'aider ?

    24
    garbawi Profil de garbawi
    Vendredi 9 Décembre 2011 à 11:13

    Coucou Papasti !

     

    Bon alors j'ai voulue me débrouiller toute seule et rajouter au code celui pour une nouvelle rubrique " ailleurs dans le monde"...mais échec... je ne sais pas ce qui ne va pas... si tu as le temps peux tu aller voir et m'expliquer comment faire ( a la fois pour rajouter une rubrique qui se déroule au clic , et pour cacher la rubrique test ) ?

     

    Cordialement,

    Garbawi

    23
    garbawi Profil de garbawi
    Mardi 6 Décembre 2011 à 11:28

    par contre j'oubliais, pour intégrer un nouvel article a une rubrique je dois modifier ton code?

     

    garbawi

    22
    garbawi Profil de garbawi
    Mardi 6 Décembre 2011 à 11:23

    ok! ba alors tout est nickel ! un grand grand merci  vraiment pour ta dispo ! pour le coup relooking du blog... pas facile de se fixer sur une mise en page!... tu en a pensé quoi toi quand tu l'a vu ?

     

    merci encore

    Garbawi

    21
    Mardi 6 Décembre 2011 à 11:17

    Oui, le problème est qu'il existe une fonction onmouseout qui permet de faire du code lorsque la souris quitte l'élément ou je devrais dire qui devrait permettre. Bref cette fonction ne marche quasiment jamais et il faut trouver un autre moyen.

    Ici, on referme l'élément lorsque l'on en ouvre un autre.

    20
    garbawi Profil de garbawi
    Mardi 6 Décembre 2011 à 11:13

    Parfait Papasti !!! on voit ceux qui savent faire ...Euu et les autres ( rire)

    Par contre est ce que c'est normal que les "articles" qui apparaisent en cliquant ne disparaissent pas d'eux même? il faut cliquer ailleurs c'est ca pour qu'ils disparaissent ?

    Encore mille merci.

    Garbawi

    19
    Mardi 6 Décembre 2011 à 11:05

    Garbawi, j'ai ajouté un module sur ton site avec le code pour 3 rubriques. Regardes ce que ça donne et si c'est bien ce que tu souhaites.

    Ce module pourra être caché une fois le code définitif réalisé. Si ça ne te convient pas, il suffit d'effacer le module

    18
    Mardi 6 Décembre 2011 à 10:24

    Si je peux vous "aider":

    Le script de Papasti (sur son forum) te permet d'afficher les titres des modules menu et de 'cacher' leur contenu.

    Sur mon blog, j'ai donc organiser mon menu gauche :

    -Les titres de (certains) modules sont les titres de rubriques d'articles ( et tu fais un lien module<->rubrique)

    -Le contenu de module( qui n'apparaitra qu'en liste déroulée au passage souris) est déterminé en fonction de quel type de module tu choisis

    ( Si tu veux que ce soit les derniers artciles ( avec chez Ekla paramètrage du nombre possible), tu prends un module "derniers articles")

    Après, il te suffit ! d'aller récupérer le numero perso de chaque module pour te faire ton script perso

    et "introduire" ce script via un module simple que tu dois placer en dernier dans ta liste de modules ( tu peux aller voir sur mon blog, PDS est le titre du moule dans lequel j'ai mis le script

    ( Papasti sait aussi comment faire pour "effacer" ce titre de l'écran, par la suite...)

    17
    garbawi Profil de garbawi
    Mardi 6 Décembre 2011 à 09:23

    Bonjour Papasti, merci beaucoup de ta dispo ! ^

     

    sur mon blog j'ai 5 rubriques à gauche avec des liens vers les articles en dessous de chacunes d'elles, exemple:

    Rubrique " faut commencer par la" à deux articles " Salamaalekom" et "nouveautés".

    Je ne sais pas si c'est possible mais j'aimerais que les deux articles n'apparaissent que quand je clique sur le titre de la rubrique .

    Je cherche a le faire non pas pour cette rubrique que je t'ai donné en exemple ( car il y aura peu d'articles), mais pour les 4 qui suivent.

    Est ce plus clair de cette facon?

    Garbawi

    16
    Mardi 6 Décembre 2011 à 09:15

    Bonjour Garbawi.

    La première des choses pour que ça puisse fonctionner est de faire activer la javascript sur ton blog. Faire la demande ici -> http://doc.eklablog.com/demandes-d-activation-javascript-topic12367

    Ensuite, que veux-tu dire par tes titres de rubriques déroulant (peux-tu m'expliquer avec les noms de rubriques de ton blog ?)

    15
    garbawi Profil de garbawi
    Mardi 6 Décembre 2011 à 09:10

    Bonjour Papasti ( désolé d'étre si active mais je vais commencer a bosser d'ici quelques jours, alors j'essaye de regler le plus de choses sur mon blog avant)

    Je viens d'essayer ce script http://le-blog-facile.ek.la/sous-menu-deroulant-vertical-dans-menu-de-gauche-topic20775... mais sans succés... d'autant qu'il s'agit d'un sous menu déroulant, moi j'aimerais pouvoir avoir mes titres de rubriques déroulant... arggg quand on ne s'y connait pas en info et en code c'est a se tirer les cheveux, mais je ne reconce pas. La seule chose que j'ai réussi a obtenir en appliquant ce code c'est d'avoir une nouvelle rubrique ou apparait écrit ( a gauche dans le menu) le code ainsi que le lien de mon premier titre , celui la qui marche. Bref... persevérance.

    J'attends tes conseils avec impatience.

    Garbawi

    14
    garbawi Profil de garbawi
    Lundi 5 Décembre 2011 à 19:45

    Papasti, je t'ai mis en niveau 2 d'accés au blog si tu veux aller jeter un oeil !

    Mon blog

    Merci de ton aide.

    Garbawi

    13
    garbawi Profil de garbawi
    Lundi 5 Décembre 2011 à 19:01

    Merci a tous et a toutes,

     

    arg je regarderais ca demain, car pour le moment c'est un peu du chinois pour moi.

     

    bonne soirée

    12
    Lundi 5 Décembre 2011 à 12:52

    Bonjour, c'est Ékriture modèrne..

     

    En fait, il te faut aller voir sur l'autre blog de Papasti

    dans forum: javascript

    C'est là que Papasti nous a concocté un script impeccable !

    Il faut que tu organises ton menu avec des modules ( les titres qui apparaissent) dans lesquels tu mets des liens vers des rubriques d'articles (la liste qui se déroule au passage de la souris sur le titre) 

    ...si je me souviens bien...

    A plus

     

    11
    garbawi Profil de garbawi
    Lundi 5 Décembre 2011 à 11:36

    OUi exactement comme ca. plus tard je verrais à insérer une image en fond de chaque titre de rubrique.^

    ( je me lance la dedans car beaucoup beaucoup d'articles vont venir sur mon blog qui parlent de voyage, actuellement égypte, usa, éthiopie, syrie...et en plus je me suis fait pourrir par des sois disants amis = marre besoin de faire quelque chose de claire et d'éfficace)

     

    merci de ton aide

    10
    Lundi 5 Décembre 2011 à 11:23
    9
    garbawi Profil de garbawi
    Lundi 5 Décembre 2011 à 11:08

    Bonjour,

    Je début a peine dans le domaine du blog et souhaiterais rendre le mien plus "visible".

    Pour t'expliquer, mon blog est fait comme ceci:

    Menu a gauche avec plusieurs rubriques , et en dessous de chaque rubriques le lien vers les articles de la rubrique.

    Je souheterais savoir si il est possible qu'en cliquant sur le titre de la rubrique ( a l'heure actuelle je ne peux pas cliquer sur le titre de la rubrique) apparaissent alors en menu déroulant la liste des articles qu'elle contient ?

    J'ai essayée d'utiliser ton tuto, mais je débute vraiment dans l'informatique et cela n'a pas fonctionné, et je n'ai pas tout compris....

    j'aimerais beaucoup pouvoir faire cela car cela me permettrait de gagner en lisibilité et en place dans mon menu.

    J'espéres que tu pourra m'aider.^

    Cordialement,

    Garbawi

     

    8
    Jeudi 17 Novembre 2011 à 23:23

    Ci-dessous le code correspondant au dernier select de l'article avec une image de fond. Pour mettre ton image, il suffit de remplacer le texte en rouge par le lien de ton image.

    <select style="width: 100%; color: black; background-image: url('le lien de ton image');" name="menu_destination" size="5"> <option style="color: black;" value="#FF0000">Vous pouvez aussi y mettre une image de fond. Bref, beaucoup de possibilités</option> </select>

    7
    Jeudi 17 Novembre 2011 à 21:36

    Quel est le code (à rajouter) pour mettre une image de fond ?

    6
    Dimanche 6 Novembre 2011 à 11:30

    bravo pour tes astuce  moi aussi je fais un peut ce genre de truc

    mais la liste deroulante  comme tu la fais je connaissais pas merci a toi pour ce tuto

    a pluche

    5
    Vendredi 14 Octobre 2011 à 18:18

    Merci beaucoup ça va mettre vachement utile >O< !

    4
    Jeudi 15 Septembre 2011 à 10:19

    Merci de votre passage

    J'ai ajouté un exemple sur des possibilités d'adaptation en fin de tuto

    3
    Mademoiselle A Profil de Mademoiselle A
    Mardi 13 Septembre 2011 à 16:22

    SUPER JE TESTERAIS

    2
    Mardi 13 Septembre 2011 à 10:59

    m

    Merci pour ton tuto

     

    que j'archive au cas où

    bonne journée

    1
    Samedi 10 Septembre 2011 à 03:58

    Merci a bientot.

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter