Créer un menu déroulant

Très pratique quand vous avez beaucoup d'élément car vous économise énormément de place. 
Vous pouvez également l'utiliser pour vos liens, sponsors, catégories...

Exemple:


Voici le code requis:
<div class="widget-content"><br /><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" style="width: 160px;" name="menu" size="1"><option selected="selected" value="0"> Titre <br />
<option value="Lien 1" /> Titre du lien 1
<option value="http://les-10-meilleurs.blogspot.com/2011/03/ps3course.html" />Course
<option value="http://les-10-meilleurs.blogspot.com/2011/03/ps3jeux-de-role.html" /> Jeux de rôle
<option value="http://les-10-meilleurs.blogspot.com/2011/03/ps3fps.html" /> Fps
<option value=" http://les-10-meilleurs.blogspot.com/2011/03/ps3aventure.html " />Aventure
<option value="http://les-10-meilleurs.blogspot.com/2011/03/ps3beatem-all.html" /> Beat’em up
<option value="http://les-10-meilleurs.blogspot.com/2011/03/ps3horreur.html" /> Horreur
<option value="http://les-10-meilleurs.blogspot.com/2011/03/ps3plateforme.html" /> Plateforme
<option value="http://les-10-meilleurs.blogspot.com/2011/03/ps3sport.html" /> Sport</select></div>


Remarque: 
- Si vous voulez ouvrir le lien dans la même fenêtre changer tout simplement window.open par window.location.replace
- Si vous voulez changer la largeur augmenter ou diminuer style="width: 170px

<div class="widget-content"><select onchange=" window.location.replace (this.options[this.selectedIndex].value,'_blank')" style="width: 170px;" name="menu" size="1"><option selected value="0" />

14 commentaires:

PPoppy a dit…

Bonjour, merci pour ce partage, c'est ce que je cherchais... (bon j'aimerais bien changer l'aspecte maintenant :p)
Mais ça ne marche pas sur Safari, uniquement sur Firefox :/ Que faire ?

sk_ a dit…

Fait comme dans la partie "remarque" :
window.location.replace
Et ça marchera dans tous les navigateurs...
Je viens de tester sur Safari

PPoppy a dit…

Merci beaucoup pour la réponse rapide :)

Anthony CROS a dit…

Bonjour,

J'essaye d'inclure un menu déroulant sur mon menu horizontal existant, particulièrement pour l'onglet Formation. Je ne souhaite pas d'onglet Formation supplémentaire comme je viens de le faire sur mon blog (labforecast.blogspot.com).
C'est probablement très simple mais mon niveau est proche de 0 en programmation

Merci d'avance pour votre aide

sk_ a dit…

Si tu ne t'y connais pas bien en css je te conseille d'utiliser un générateur de menu déroulant. En voici un ici :
http://www.cssmenumaker.com/builder/menu_info.php?menu=061
Tu le créer sur le site puis le copie colle dans le tiens.
Félicitation pour ton blog.
Olivier

Dz Nerd Communauté a dit…

Mais ou dois je mettre ce code pour obtenir la barre ???

olivier sk a dit…

Tu le mets dans le code HTML, en mode "modifier le code HTML" quand tu créer ton message.
Sinon tu peux le mettre dans les widgets : gadget HMTL/JAVASCRIPT.
Voilà voilà...

Pierre Enselme a dit…

salut je suis entrein de creer mon blog
lesinfosessentielle.blogspot.com
j'ai inserer un menu verticel mais quand je clique sur un lien aucune page s'affiche sa me met en error
besoin d'un coup demain

Anonyme a dit…

Bonjour,
s’il vous plait aider moi, je suis qu’un amateur débutant, je veux mettre des heures de prières dans une widget ; Jais bien arrivé à mettre une image avec un menu déroulant, ainsi que les ville. Mais malheureusement je n’arrive pas à faire le lien (fiche PDF) avec le nom de la ville concerné. Voici l’adresse du site (http://www.xn--mosque-fva.net/)
les fiche PDF sont déjà installé dans la bibliothèque médias du site.
Merci d’avance.
Cordialement.

MFaddouli a dit…

Bonjour,

Je n'es toujours-pas de réponse de votre part:
S’il vous plait, aider moi, je veux mettre des heures de prières dans une widget ; Jais bien arrivé à mettre une image avec un menu déroulant, ainsi que les villes concernés. Mais malheureusement je n’arrive pas à faire le lien entre (les pages PDF) qui sont déjà installé dans la bibliothèque médias du site et les noms de villes concernés dans le menu déroulant de la widget.
Voici l’adresse du site (http://www.xn--mosque-fva.net/)

Merci d’avance.

Cordialement.

olivier sk a dit…

Tu peux faire un lien vers un document PDF, comme dans cette page :
Lien vers un pdf
Ceci sous la forme :
[a href="mon_pdf.pdf"]Lien vers mon PDF[/a]
En revanche si tu veux faire un lien vers une page précise d'un document PDF cela va être beaucoup plus difficile car le PDF n'est pas du HTML...
J'espère avoir répondu à ta question?

CAZA ASSURANCES a dit…

bonjour si je veux que ce sois un menu deroulant simplement pour selectionné et faire apparaitre ma selection mais ne pas être redirigé vers une autre page ou lien , comment fait on?

Anonyme a dit…

merci
http://personnaliser-blogger.blogspot.com/

leila roux a dit…

Bonjour je suis complètement débutante et sa fait des jours que je bloque sur le même problème. j'ai déjà crée un menu horizontale il y en a plusieurs, mais sur "l'onglet", (je ne c'est pas du tout si ça s appel comme sa) CATÉGORIE je voudrai faire un menu déroulant pour y mettre les différent article que j'ai déjà écrit. j’espère vraiment que j'ai expliquer clairement se que je voulais en l'attente de vous écrire

Enregistrer un commentaire