Probleme menu déroulant

Probleme menu déroulant - HTML/CSS - Programmation

Marsh Posté le 16-06-2009 à 21:03:39    

Bonjour,  
 
je souhaite un menu déroulant dans mon site. J'ai donc pris sur le net le script qu'une bonne ame a bien voulu donner
http://www.infos-du-net.com/forum/ [...] -deroulant
 
Ce script marche si je fais quelque chose de simple comme cela :  
 

Code :
  1. <!-- DEBUT DU SCRIPT MENU DEROULANT-->
  2. <p><form NAME="menu">
  3. <div align="center"><center><p>
  5. <select NAME="popup"
  6. onChange="change_site();" style="background-color:teal; color:yellow" size="1">
  7. <option VALUE>- Biochimie -</option>
  8. <option VALUE="index.html"> -index</option>
  9. </select>
  11. <select NAME="popup"
  12. onChange="change_site();" style="background-color:teal; color:yellow" size="1">
  13. <option VALUE>- Microbiologie -</option>
  14. <option VALUE="acceuilcalculs.html"> -calculs </option>
  15. </select>
  17. </p> 
  18. </center></div>
  19. </form>
  20. <script>
  21. function change_site() {
  22. var site = document.menu.popup.selectedIndex;
  23. {
  24. window.location.href =
  25. document.menu.popup.options[site].value;
  26. }
  27. }
  28. </script>
  29. </p>
  30. <!-- FIN DU SCRIPT MENU DEROULANT-->


 
Sous Wampserver, quand je click sur le "index" de mon menu déroulant, il m'amene bien à ma page index.html (je crois l'avoir testé en ligne aussi et ca marche, avec ke bon chemin d'acces biensur)
 
Cependant je souhaite créer sur la meme ligne plusieurs menu déroulant, j'ai donc modifier mon code comme ceci :  
 

Code :
  1. <!-- DEBUT DU SCRIPT MENU DEROULANT-->
  2. <p><form NAME="menu">
  3. <div align="center"><center><p>
  5. <select NAME="popup"
  6. onChange="change_site();" style="background-color:teal; color:yellow" size="1">
  7. <option VALUE>- Biochimie -</option>
  8. <option VALUE="index.html"> -index</option>
  9. </select>
  11. <select NAME="popup"
  12. onChange="change_site();" style="background-color:teal; color:yellow" size="1">
  13. <option VALUE>- Microbiologie -</option>
  14. <option VALUE="acceuilcalculs.html"> -calculs </option>
  15. </select>
  17. </p> 
  18. </center></div>
  19. </form>
  20. ... blablabla


 
Le fait de rajouter ce nouvel onglet déroulant me fait tout péter : quand je click sur le "index" qui marchait tout a l'heure, la il ne marche plus...
 
Quel erreur de synthaxe ai je fais ? Ou bien le script n'est pas adapté pour plusieurs onglets déroulant ?  
 
Merci

Reply

Marsh Posté le 16-06-2009 à 21:03:39   

Reply

Marsh Posté le 16-06-2009 à 22:51:49    

Bon, je viens d'apporter des modifs, j'ai reussi a faire marche mais avec un gros bug, donc pour les connaisseurs je pense que vous verrez vite l'erreur (moi j'connais pas trop le javascript...)
 

Code :
  1. <script>
  2. function change_site() {
  3. var site = document.menu1.popup.selectedIndex;
  4. {
  5. window.location.href =
  6. document.menu1.popup.options[site].value;
  7. } 
  8. }
  9. </script>
  10. <script>
  11. function change_site() {
  12. var site = document.menu2.popup.selectedIndex;
  13. {
  14. window.location.href =
  15. document.menu2.popup.options[site].value;
  16. }
  18. }
  19. </script>
  23. <p><form NAME="menu1">
  24. <div align="center"><center><p>
  25. <select NAME="popup"
  26. onChange="change_site();" style="background-color:teal; color:yellow" size="1">
  27. <option VALUE>- test -</option>
  28. <option VALUE="acceuilcalculs.html"> -test1</option>
  29. </select>
  30. </p> 
  31. </center></div>
  32. </form>
  34. <form NAME="menu2">
  35. <div align="center"><center><p>
  36. <select NAME="popup"
  37. onChange="change_site();" style="background-color:teal; color:yellow" size="1">
  38. <option VALUE>- test -</option>
  39. <option VALUE="acceuilcalculs.html"> -test2</option>
  40. </select>
  41. </p> 
  42. </center></div>
  43. </form>


 
Donc la j'ai créé 2 onglets de menu deroulant avec 1 script chacun, et le seul qui marche et celui dans la form "menu2".  
 
Mais je me suis apercu que si dans mon code source je fait passer le <script> du menu1 apres celui du menu2, seul mon menu deroulant test1 marche.
 
Donc en gros, seul mon dernier <script> est pris en compte. Comment faire pour que les 2 marchent ? Merci

Reply

Marsh Posté le 16-06-2009 à 23:39:22    

salut,
 
c'est normal tu ne peux pas déclarer 2 fonction portant le même nom...
 
un truc qui devrait marcher serait ceci:

Code :
  1. <script>
  2. function change_site(menuselect) {
  3. var site = menuselect.selectedIndex;
  4. {
  5. window.location.href =
  6. menuselect.options[site].value;
  7. } 
  8. }
  9. </script>
  13. <p><form NAME="menu1">
  14. <div align="center"><center><p>
  15. <select NAME="popup"
  16. onChange="change_site(this);" style="background-color:teal; color:yellow" size="1">
  17. <option VALUE>- test -</option>
  18. <option VALUE="acceuilcalculs.html"> -test1</option>
  19. </select>
  20. </p> 
  21. </center></div>
  22. </form>
  24. <form NAME="menu2">
  25. <div align="center"><center><p>
  26. <select NAME="popup"
  27. onChange="change_site(this);" style="background-color:teal; color:yellow" size="1">
  28. <option VALUE>- test -</option>
  29. <option VALUE="acceuilcalculs.html"> -test2</option>
  30. </select>
  31. </p> 
  32. </center></div>
  33. </form>


 

Reply

Marsh Posté le 17-06-2009 à 19:43:58    

Salut, j'avais testé autre chose entre temps, mais c'est relativement semblable, et ca marche :
 

Code :
  1. <script>
  2. function change_site(obj) {window.location.href = obj.options[obj.selectedIndex].value; }
  3. </script>
  6. <p><form NAME="menu1">
  7. <div align="center"><center><p>
  8. <select NAME="popup"
  9. onChange="change_site(this);" style="background-color:teal; color:yellow" size="1">
  10. <option VALUE>- test -</option>
  11. <option VALUE="acceuilcalculs.html"> -test1</option>
  12. </select>
  13. </p> 
  14. </center></div>
  15. </form>
  17. <form NAME="menu2">
  18. <div align="center"><center><p>
  19. <select NAME="popup"
  20. onChange="change_site(this);" style="background-color:teal; color:yellow" size="1">
  21. <option VALUE>- test -</option>
  22. <option VALUE="acceuilcalculs.html"> -test2</option>
  23. </select>
  24. </p> 
  25. </center></div>
  26. </form>


 
Merci quand meme pour ton aide !
 
RESOLU

Reply

Marsh Posté le 18-06-2009 à 11:01:45    

peux-tu éditer ton premier post pour mettre [RESOLU] dans le titre stp?

Reply

Marsh Posté le 16-11-2009 à 18:27:15    

Ah non, c'est pas du tout résolu car il me faut pas du javascript :( . Si je devais le faire en java ca serait fait depuis un baille :p . Mais la il me faut uniquement du html + css pour eviter les problèmes liés au javascript (active X a telecharger quand on nouvel utilisateur ouvre la page, ou un truc comme ca).  
 
Donc merci bien, mais serait il possible de ne pas mettre de javascript dans vos solutions ? :)

Reply

Marsh Posté le 16-11-2009 à 19:25:50    

edit :  
 
je me susi trompé !!!! Ne repondez plus a ce message, mais a celui présent un peu plus bas. Je ne veux plus le contruire en javascrip.  
 
Voir le POST "probleme pour faire sortir le menu deroulant sur la droite", c'est celui la que je veux :p
 
merci

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed