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" />

18 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 ?

olivier 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

olivier 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à...

Unknown 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?

Unknown 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/

Unknown 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

Online Sap Trainers a dit…

Nice blog post!!! Very informative and appreciable . keep posting

Best sap institute in India ,SAP online training & sap training courses
SAP ABAP on HANA Online Training
sap hana online training
sap S/4 HANA training online
SAP UI5 Online Training in India
Learn SAP online
sap fiori training online
sap fico training online

Thanks

svrtechnologies a dit…

This is so elegant and logical and clearly explained. Brilliantly goes through what could be a complex process and makes it obvious.

sap fico training videos
sap fico online training

IK Softech a dit…


Whatever we gathered information from the blogs, we should implement that in practically then only we can understand that exact thing clearly, but it’s no need to do it, because you have explained the concepts very well. It was crystal clear, keep sharing.. sap sd training in Bangalore

MY PET CLINIC VIZAG a dit…

I appreciate this piece of useful information,Thank You.Signova Group

Enregistrer un commentaire