Voir tous les tags-
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é Club Nieppois" >
<option value="http://kcn.eklablog.com/baby-karate-p144525">Baby Karaté</option>
<option value="http://kcn.eklablog.com/body-karate-p144557">Body Karaté</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éos du Club</option>
<option value="http://kcn.eklablog.com/telechargements-p157868">Téléchargements</option>
</optgroup> <
</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
-
Commentaires
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
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
@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>
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
53garbawi
Mardi 4 Septembre 2012 à 17:0751garbawi
Mardi 4 Septembre 2012 à 16:43Bonjour 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
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.
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 ?
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.
44Asiyou
Mercredi 1er Février 2012 à 00:59Ah 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 à toi43Véro37
Samedi 21 Janvier 2012 à 23:45En 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.
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ée38garbawi
Jeudi 12 Janvier 2012 à 16:17Merci Chef! parfait !36garbawi
Jeudi 12 Janvier 2012 à 15:34je veux bien aussi le menu dernier article en déroulant...si possible! merci merci merci !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 ?34garbawi
Jeudi 12 Janvier 2012 à 15:02C'est fait papasti !
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;}32garbawi
Jeudi 12 Janvier 2012 à 12:08Bonjour Papasti , arrive tu à accéder à mon blog sans probléme maintenant ?
Cordialement,
Garbawi31garbawi
Lundi 9 Janvier 2012 à 19:13Je t'ai donné la permission d'aller voir mon blog, normalement tu ne devrais plus avoir de soucis.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.29garbawi
Lundi 9 Janvier 2012 à 17:56arff 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 !
Garbawi28garbawi
Lundi 9 Janvier 2012 à 17:55Bonjour 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,
Garbawi27garbawi
Vendredi 9 Décembre 2011 à 15:14
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 ?
25garbawi
Vendredi 9 Décembre 2011 à 11:16arff je viens de voir que ce que j'ai fait à modifié tout ton script .... suis désolé... :s .... peux tu m'aider ?
24garbawi
Vendredi 9 Décembre 2011 à 11:13Coucou 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
23garbawi
Mardi 6 Décembre 2011 à 11:28par contre j'oubliais, pour intégrer un nouvel article a une rubrique je dois modifier ton code?
garbawi
22garbawi
Mardi 6 Décembre 2011 à 11:23ok! 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
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.
20garbawi
Mardi 6 Décembre 2011 à 11:13Parfait 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
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
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...)
17garbawi
Mardi 6 Décembre 2011 à 09:23Bonjour 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
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 ?)
15garbawi
Mardi 6 Décembre 2011 à 09:10Bonjour 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
14garbawi
Lundi 5 Décembre 2011 à 19:4513garbawi
Lundi 5 Décembre 2011 à 19:01Merci 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
Bonjour, c'est Ékriture modèrne..
En fait, il te faut aller voir sur l'autre blog de Papasti
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
11garbawi
Lundi 5 Décembre 2011 à 11:36OUi 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
9garbawi
Lundi 5 Décembre 2011 à 11:08Bonjour,
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
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>
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
Merci de votre passage
J'ai ajouté un exemple sur des possibilités d'adaptation en fin de tuto
3Mademoiselle A
Mardi 13 Septembre 2011 à 16:22
Suivre le flux RSS des commentaires
Vous devez être connecté pour commenter
Créer mon blog
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