Votre question

Menu déroulant vertical, comment faire ?

Tags :
  • Programmation
Dernière réponse : dans Programmation
29 Octobre 2009 17:57:17

Bonjour, j'aimerais faire un menu déroulant vertical sur la gauche de ma page, comme sa:

Menu
Page 1
Sous menu de la page 1
Page 2
sous menu de la page 2
Page 3


Et quand on pose la souris sur page 1 et 2, le sous menu su déroule.

Autres pages sur : menu deroulant vertical

29 Octobre 2009 22:04:18

Merci bcp, je verrais sa demain, quand j'aurais l'esprit bien claire ;=)
m
0
l
Contenus similaires
30 Octobre 2009 01:12:31

M@cduf:
Le menu que tu présentes est un menu déroulant mais à l'horizontal.

sasuke-uchiwa-itachi:
Il te faut dans un premier temps apprendre le CSS pour créer ce genre de menu. Cela n'est pas très compliqué:

Voici quelques liens avec divers menu verticaux déroulant:
Lien1
Lien2

Le deuxième lien présente plus de choix dans l'interface. En revanche, je pense que le mieux pour toi, serait de voir comment fonctionne le menu dynamique du lien 1 et de créer ce que tu veux avec celui-ci. Tu as juste à trouver les bons codes.

Reviens sur se forum si tu n'arrives pas, je regarderai ton code et je t'aiderai à faire ce que tu veux exactement!
m
0
l
30 Octobre 2009 15:48:26

Bonjour, je connais déjà le CSS, mais ce n'est pas ce que je cherche :s
Là, le menu est horizontal, et moi je le veux vertical déroulant verticalement.
Peux-tu m'aider à faire cela stp ?
m
0
l
30 Octobre 2009 15:52:05

Bien sur! ^^

Je ferais ça ce soir en rentrant à la maison! demain tu auras ton menu ^^
m
0
l
30 Octobre 2009 15:56:26

:-o Merci infiniment :D 
J'aurais surement d'autre problème pour le CSS / xHTML, est ce que tu peux regarder mes topiques si tu en vois stp ? tu m'a l'aire d'être bien doué ^^
m
0
l
31 Octobre 2009 13:52:00

Salut LordOfKnight, j'attend toujours ta réponse, j'espère au moins que tu est rentrer chez toi :s
m
0
l
31 Octobre 2009 16:55:36

Plop, désolé du retard!

Il te faut 3 fichiers, un fichier en HTML, un autre en CSS et le dernier en javascript!

Fichier: Javascript
  1. function afficheMenu(obj){
  2.  
  3. var idMenu = obj.id;
  4. var idSousMenu = 'sous' + idMenu;
  5. var sousMenu = document.getElementById(idSousMenu);
  6.  
  7. /*****************************************************/
  8. /** on cache tous les sous-menus pour n'afficher **/
  9. /** que celui dont le menu correspondant est cliqué **/
  10. /** où 4 correspond au nombre de sous-menus **/
  11. /*****************************************************/
  12. for(var i = 1; i <= 4; i++){
  13. if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
  14. document.getElementById('sousmenu' + i).style.display = "none";
  15. }
  16. }
  17.  
  18. if(sousMenu){
  19. //alert(sousMenu.style.display);
  20. if(sousMenu.style.display == "block"){
  21. sousMenu.style.display = "none";
  22. }
  23. else{
  24. sousMenu.style.display = "block";
  25. }
  26. }
  27.  
  28. }


Fichier: CSS
  1. *{
  2. margin:0;
  3. padding:0;
  4. }
  5. #menu{
  6. width:150px;
  7. margin:20px auto 0 auto;
  8. }
  9. .menu, .sousmenu{
  10. text-align:center;
  11. }
  12. .menu{
  13. height:18px;
  14. width:150px;
  15. padding:2px 0;
  16. color:#000000;
  17. }
  18. .sousmenu{
  19. height:18px;
  20. width:150px;
  21. padding:1px 0;
  22. color:#000000;
  23. }
  24. .menu a{
  25. display:block;
  26. width:100%;
  27. height:100%;
  28. color:#000000;
  29. font-family:arial,sans-serif;
  30. font-size:12px;
  31. font-weight:bold;
  32. text-decoration:none;
  33. background:#ffffff;
  34. }
  35. .sousmenu a{
  36. display:block;
  37. width:100%;
  38. height:100%;
  39. color:#333333;
  40. font-family:arial,sans-serif;
  41. font-size:12px;
  42. font-weight:bold;
  43. text-decoration:underline;
  44. }
  45. .menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
  46.  
  47. }


Fichier: HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4. <title>Menu déroulant vertical sur clic</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" href="style.css" type="text/css" />
  7. <script type="text/javascript" src="functions.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="menu">
  12. <div class="menu" id="menu1" onclick="afficheMenu(this)">
  13. <a href="#">Menu 1</a>
  14. </div>
  15. <div id="sousmenu1" style="display:none">
  16. <div class="sousmenu">
  17. <a href="#">Sous-Menu 1.1</a>
  18. </div>
  19. <div class="sousmenu">
  20. <a href="#">Sous-Menu 1.2</a>
  21. </div>
  22. <div class="sousmenu">
  23. <a href="#">Sous-Menu 1.3</a>
  24. </div>
  25. <div class="sousmenu">
  26. <a href="#">Sous-Menu 1.4</a>
  27. </div>
  28. </div>
  29.  
  30. <div class="menu" id="menu2" onclick="afficheMenu(this)">
  31. <a href="#">Menu 2</a>
  32. </div>
  33. <div id="sousmenu2" style="display:none">
  34. <div class="sousmenu">
  35. <a href="#">Sous-Menu 2.1</a>
  36. </div>
  37. <div class="sousmenu">
  38. <a href="#">Sous-Menu 2.2</a>
  39. </div>
  40. <div class="sousmenu">
  41. <a href="#">Sous-Menu 2.3</a>
  42. </div>
  43. </div>
  44.  
  45. <div class="menu" id="menu3" onclick="afficheMenu(this)">
  46. <a href="#">Menu 3</a>
  47. </div>
  48. <div id="sousmenu3" style="display:none">
  49. <div class="sousmenu">
  50. <a href="#">Sous-Menu 3.1</a>
  51. </div>
  52. <div class="sousmenu">
  53. <a href="#">Sous-Menu 3.2</a>
  54. </div>
  55. <div class="sousmenu">
  56. <a href="#">Sous-Menu 3.3</a>
  57. </div>
  58. </div>
  59.  
  60. <div class="menu" id="menu4" onclick="afficheMenu(this)">
  61. <a href="#">Menu 4</a>
  62. </div>
  63. <div id="sousmenu4" style="display:none">
  64. <div class="sousmenu">
  65. <a href="#" >Sous-Menu 4.1</a>
  66. </div>
  67. <div class="sousmenu">
  68. <a href="#">Sous-Menu 4.2</a>
  69. </div>
  70. <div class="sousmenu">
  71. <a href="#">Sous-Menu 4.3</a>
  72. </div>
  73. <div class="sousmenu">
  74. <a href="#">Sous-Menu 4.4</a>
  75. </div>
  76. <div class="sousmenu">
  77. <a href="#">Sous-Menu 4.5</a>
  78. </div>
  79. </div>
  80. </div>
  81.  
  82. </body>
  83. </html>



Pour les autres topiques, envoie moi les liens je regarderais!
Ps: Je suis doué en rien, je suis juste un gros con qui reprends tout pour créer! XD
m
0
l
31 Octobre 2009 17:00:35

Petit problème, je ne sait pas me servire du javascript :D  donc je créer un fichier, mais comment relier le fichier Javascript et fichier xHTML ?
m
0
l
31 Octobre 2009 17:14:37

tu as juste as mettre le code JavaScript dans un fichier apelé functions.js !

Pas besoin de connaitre le JavaScript c'est marqué dans le code html !
m
0
l
31 Octobre 2009 17:18:24

Presque parfait :D 
Problèmes:
sa fait comme si il y avai des traits entre chaque menu:
______
Menu 1
______
Menu 2
______

Et justement je veux pas ces traits :s
Autre chose, j'aimerais que ça s'ouvre rien qu'au passage de la souris stp, pas en cliquant dessus.
m
0
l
31 Octobre 2009 17:21:46

j'regarde vite fait le code ! et modifie si j'peu le code pour qu'il soit comme tu veux !
m
0
l
31 Octobre 2009 18:04:45

Onmouseover!

Voici, le fichier en javascript, il faut absolument le changer entièrement:

Fichier: javascript
  1. function affiche(obj){
  2. var id = obj.id;
  3.  
  4. for(var i = 1; i <= 4; i++){
  5. document.getElementById('sousmenu'+i).style.display = "none";
  6. }
  7.  
  8. if(document.getElementById('sous'+id)){
  9. document.getElementById('sous'+id).style.display = "block";
  10. }
  11. }


  1. for(var i = 1; i <= 4; i++)


Il y a plus de 4 menus sur ton site, n'oublie pas de changer la valeur au dessus de 4 par rapport aux nombres de menus que tu as:

Fichier: html
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4. <title>Menu déroulant vertical sur clic</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" href="style.css" type="text/css" />
  7. <script type="text/javascript" src="functions.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="menu">
  12. <div class="menu" id="menu1" onmouseover="affiche(this)">
  13. <a href="#">Menu 1</a>
  14. </div>
  15. <div id="sousmenu1" style="display:none" onmouseover="affiche(this)">
  16. <div class="sousmenu">
  17. <a href="#">Sous-Menu 1.1</a>
  18. </div>
  19. <div class="sousmenu">
  20. <a href="#">Sous-Menu 1.2</a>
  21. </div>
  22. <div class="sousmenu">
  23. <a href="#">Sous-Menu 1.3</a>
  24. </div>
  25. <div class="sousmenu">
  26. <a href="#">Sous-Menu 1.4</a>
  27. </div>
  28. </div>
  29.  
  30. <div class="menu" id="menu2" onmouseover="affiche(this)">
  31. <a href="#">Menu 2</a>
  32. </div>
  33. <div id="sousmenu2" style="display:none" onmouseover="affiche(this)">
  34. <div class="sousmenu">
  35. <a href="#">Sous-Menu 2.1</a>
  36. </div>
  37. <div class="sousmenu">
  38. <a href="#">Sous-Menu 2.2</a>
  39. </div>
  40. <div class="sousmenu">
  41. <a href="#">Sous-Menu 2.3</a>
  42. </div>
  43. </div>
  44. <div class="menu" id="menu3" onmouseover="affiche(this)">
  45. <a href="#">Menu 3</a>
  46. </div>
  47. <div id="sousmenu3" style="display:none" onmouseover="affiche(this)">
  48. <div class="sousmenu">
  49. <a href="#">Sous-Menu 3.1</a>
  50. </div>
  51. <div class="sousmenu">
  52. <a href="#">Sous-Menu 3.2</a>
  53. </div>
  54. <div class="sousmenu">
  55. <a href="#">Sous-Menu 3.3</a>
  56. </div>
  57. <div class="sousmenu">
  58. <a href="#">Sous-Menu 3.4</a>
  59. </div>
  60. </div>
  61.  
  62. <div class="menu" id="menu4" onmouseover="affiche(this)">
  63. <a href="#">Menu 4</a>
  64. </div>
  65. <div id="sousmenu4" style="display:none" onmouseover="affiche(this)">
  66. <div class="sousmenu">
  67. <a href="#">Sous-Menu 4.1</a>
  68. </div>
  69. <div class="sousmenu">
  70. <a href="#">Sous-Menu 4.2</a>
  71. </div>
  72. <div class="sousmenu">
  73. <a href="#">Sous-Menu 4.3</a>
  74. </div>
  75. </div>
  76.  
  77. </div>
  78.  
  79. </body>
  80. </html>


En ce qui concerne tes traits, je ne sais pas trop de quoi tu veux parler, je n'ai pas ça sur firefox.
Sinon, regarde dans le fichier en CSS et enlève le underline!

Enfin, je ne mets pas le fichier en CSS, c'est exactement la même chose!
m
0
l
31 Octobre 2009 18:44:12

Merci, par contre, j'ai pas compris ce qu'il faudra changer, c'est le 4* qui sera à changer ( dans le code javascript ) ?
m
0
l
31 Octobre 2009 18:47:44

C'est pas possible, j'ai chercher sa pendant des jours, et je l'est enfin --'
Merci infiniment *_*
m
0
l
31 Octobre 2009 18:49:14

Autre petite question:
Voilà, c'est un petit peu chiant de recopier chaque code de mon menu et de ma bannière sur chaque page, y aurait-il un moyen pour que sa se répète au même endroit sur toutes les pages stp ?


Rolala que suis-je chiant --' Mais il y à un autre problème, quand on pose la souris dessus c'est parfait c'est ce que je cherchais, mais quand je veux poser ma souris sur un sous-menu, sa va au menu suivant, du coup je ne peux pas accéder à mes pages ^^'
m
0
l
31 Octobre 2009 19:22:46

En effet, je n'avais pas vu ce bug. Je répare ça:

Pour ce qui est de recopier le menu sur chaque page, malheureusement, si tu ne veux pas t'embêter avec ça, tu dois passer par ce que l'on appelle le PHP. Sinon, tu peux utiliser les frames, mais le code reste néanmoins plutôt brouillon!


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4. <title>Menu déroulant vertical sur clic</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <link rel="stylesheet" href="style.css" type="text/css" />
  7. <script type="text/javascript" src="functions.js"></script>
  8. </head>
  9. <body>
  10.  
  11. <div id="menu">
  12. <div class="menu" id="menu1" onmouseover="affiche(this)">
  13. <a href="#">Menu 1</a>
  14. </div>
  15. <div id="sousmenu1" style="display:none">
  16. <div class="sousmenu">
  17. <a href="#">Sous-Menu 1.1</a>
  18. </div>
  19. <div class="sousmenu">
  20. <a href="#">Sous-Menu 1.2</a>
  21. </div>
  22. <div class="sousmenu">
  23. <a href="#">Sous-Menu 1.3</a>
  24. </div>
  25. <div class="sousmenu">
  26. <a href="#">Sous-Menu 1.4</a>
  27. </div>
  28. </div>
  29.  
  30. <div class="menu" id="menu2" onmouseover="affiche(this)">
  31. <a href="#">Menu 2</a>
  32. </div>
  33. <div id="sousmenu2" style="display:none">
  34. <div class="sousmenu">
  35. <a href="#">Sous-Menu 2.1</a>
  36. </div>
  37. <div class="sousmenu">
  38. <a href="#">Sous-Menu 2.2</a>
  39. </div>
  40. <div class="sousmenu">
  41. <a href="#">Sous-Menu 2.3</a>
  42. </div>
  43. </div>
  44. <div class="menu" id="menu3" onmouseover="affiche(this)">
  45. <a href="#">Menu 3</a>
  46. </div>
  47. <div id="sousmenu3" style="display:none">
  48. <div class="sousmenu">
  49. <a href="#">Sous-Menu 3.1</a>
  50. </div>
  51. <div class="sousmenu">
  52. <a href="#">Sous-Menu 3.2</a>
  53. </div>
  54. <div class="sousmenu">
  55. <a href="#">Sous-Menu 3.3</a>
  56. </div>
  57. <div class="sousmenu">
  58. <a href="#">Sous-Menu 3.4</a>
  59. </div>
  60. </div>
  61.  
  62. <div class="menu" id="menu4" onmouseover="affiche(this)">
  63. <a href="#">Menu 4</a>
  64. </div>
  65. <div id="sousmenu4" style="display:none">
  66. <div class="sousmenu">
  67. <a href="#">Sous-Menu 4.1</a>
  68. </div>
  69. <div class="sousmenu">
  70. <a href="#">Sous-Menu 4.2</a>
  71. </div>
  72. <div class="sousmenu">
  73. <a href="#">Sous-Menu 4.3</a>
  74. </div>
  75. </div>
  76.  
  77. </div>
  78.  
  79. </body>
  80. </html>

m
0
l
31 Octobre 2009 19:27:10

D'accord, merci. Le PHP j'ai du mal pour l'instant et je n'est pas trop le temps de l'étudier ( tout comme de javascript ).
J'aimerais savoir, que faut-il modifier en javascript si je veux rajouter ou enlever un menu stp ?
m
0
l
31 Octobre 2009 19:30:15

Aussi, quand je change de menu, ma souris atterri en bas du sous menu, y à t-il un moyen pour que la souris se dirige automatiquement vers le 1er sous-menu ?
m
0
l
31 Octobre 2009 19:44:45

Ce n'est pas automatique, c'est parce que ton menu se déroule, donc la souris ne se place plus au même endroit. Tout dépend de la hauteur de ton menu.

Pour le javascript, il ne sert pas à supprimer les menus ou à les ajouter. Il sert simplement à autoriser le passage de la souris sur les menus.

  1. 1. function affiche(obj){
  2. 2. var id = obj.id;
  3. 3.
  4. 4. for(var i = 1; i <= 4; i++){
  5. 5. document.getElementById('sousmenu'+i).style.display = "none";
  6. 6. }
  7. 7.
  8. 8. if(document.getElementById('sous'+id)){
  9. 9. document.getElementById('sous'+id).style.display = "block";
  10. 10. }
  11. 11. }


Il permet entre autre que lorsque tu passes la souris sur un menu, les autres menus se referme automatique.

Dans ton cas, essaie de changer le 4 en 2 et tu verras la différence.
m
0
l
31 Octobre 2009 19:49:22

Je dois changer mon code avec celui que tu viens d'envoyer ?

Et comment je fais alors pour Ajouter ou supprimer un menu, car si je le fait que sur le xHTML, cela ne m'ouvre plus les sous menu .

J'ai essayer de changer le 4 en 2, et j'ai compris. Ca sert à dire que les 4 menus peuvent se refermer, c'est bien sa ?

Et pour ma souris, comment je dois faire ?
m
0
l
31 Octobre 2009 20:08:30

Pour le code CSS, je ne comprend pas les dernière lignes ( à partir de la page 45 ).
A quoi servent-elles ?
m
0
l
31 Octobre 2009 20:11:07

Regarde ce code, je pense que tu verra de quoi je parlais quand je disais qu'il y avais des lignes entre chaque menu:
  1. *{
  2. margin:0;
  3. padding:0;
  4. }
  5. #menu{
  6. width:150px;
  7. margin:20px auto 0 auto;
  8. }
  9. .menu, .sousmenu{
  10. text-align:center;
  11. }
  12. .menu{
  13. height:50px;
  14. width:150px;
  15. padding:2px 0;
  16. color:#F00;
  17. }
  18. .sousmenu{
  19. height:18px;
  20. width:150px;
  21. padding:1px 0;
  22. color:#000000;
  23. }
  24. .menu a{
  25. display:block;
  26. width:100%;
  27. height:100%;
  28. color:#F00;
  29. font-family:arial,sans-serif;
  30. font-size:40px;
  31. font-weight:bold;
  32. text-decoration:none;
  33. background:#000000;
  34. }
  35. .sousmenu a{
  36. display:block;
  37. width:100%;
  38. height:100%;
  39. color:#1AB515;
  40. font-family:arial,sans-serif;
  41. font-size:12px;
  42. font-weight:bold;
  43. text-decoration:none;
  44. background: #000000;
  45. }
  46. .menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
  47. }

m
0
l
31 Octobre 2009 20:12:45

@ sasuke-uchiwa-itachi

oups ! :sweat:  dsl de t'avoir abandonné mais j'vois que la personne qui t'aidé au debut de ton sujet et re-venu t-aider ! :) 
m
0
l
31 Octobre 2009 20:14:37

Oui :D 
Ca met un peu de temps pour voir les réponses ^^
Avec un peu de chance, demain j'aurais fini xD
Mais le plus important, c'est de faire ce que je souhaite :D 
Tu peux encore m'aider, tout mes problèmes ne sont pas résolus ^^
m
0
l
31 Octobre 2009 21:21:19

Svp aidez moi :'(  J'aimerais finir mon menu ce soir :( 
m
0
l
31 Octobre 2009 21:36:19

j'ai essayé avec firefox 3.5 ,Opera 10 , et IE 8 mais j'vois pas non plus tes ligne entre chaque menus !

et sinon il te reste quoi comme problème ?
m
0
l
31 Octobre 2009 21:49:49

Bon, je vais passer ce problème pour le moment. Autre problème:
Quand je passe ma souris sur un menu, elle atterrit directement tout en bas du sous menu, j'aimerais qu'elle apparaisse au premier sous menu et non au dernier. Comment faire stp ?

Et comment je fais alors pour Ajouter ou supprimer un menu ou un sous menu ?
m
0
l
31 Octobre 2009 22:05:39

alors donc pour ajouté

  • un menu :

    tu ajoute
    1. <div class="menu" id="menu5" onmouseover="affiche(this)">
    2. <a href="#">Menu 5</a>
    3. </div>
    4. <div id="sousmenu5" style="display:none">
    5. <div class="sousmenu">
    6. <a href="#">Sous-Menu 5.1</a>
    7. </div>
    8. <div class="sousmenu">
    9. <a href="#">Sous-Menu 5.2</a>
    10. </div>
    11. <div class="sousmenu">
    12. <a href="#">Sous-Menu 5.3</a>
    13. </div>
    14. <div class="sousmenu">
    15. <a href="#">Sous-Menu 5.4</a>
    16. </div>
    17. </div>


    en modifiant les titre et l'id comme j'ai fait

  • et pour le sous menu

    tu ajoute
    1. <div class="sousmenu">
    2. <a href="#">Sous-Menu 5.5</a>
    3. </div>


    J'espere que c'est assez clair et que j'ai rien oublié !!
    m
    0
    l
    31 Octobre 2009 22:08:07

    Et pour en enlever un ? Et pour ma souris ?
    Encore un petit problème que j'ai remarquer: quand je passe ma souris et que le sous menu s'affiche, il ne s'en vas pas quand je part du menu. Il se renbobine que quand je change de page ...
    m
    0
    l
    31 Octobre 2009 22:15:46

    sasuke-uchiwa-itachi a dit :
    Et pour en enlever un ? Et pour ma souris ?
    Encore un petit problème que j'ai remarquer: quand je passe ma souris et que le sous menu s'affiche, il ne s'en vas pas quand je part du menu. Il se renbobine que quand je change de page ...


    Sa c'est que tu a oublié ceci a modifié dans le code javascript comme avais dit LordOfKnight !
    mais j'avais oublié de te le rappelé

    LordOfKnight a dit :


    1. for(var i = 1; i <= 4; i++)


    Il y a plus de 4 menus sur ton site, n'oublie pas de changer la valeur au dessus de 4 par rapport aux nombres de menus que tu as:


    m
    0
    l
    31 Octobre 2009 22:18:05

    Ouai, mais le problème c'est : J'ai 4 menus, et, je veux enlever des sous menu, mais quand j'enlève tout les sous menu d'un seul menu, tout les autres sous menus ne s'affichent pas. Quel est le problème stp ?
    m
    0
    l
    31 Octobre 2009 22:23:49

    exemple pour le sous menu 4 tu enleve ceci

    1. <div class="sousmenu">
    2. <a href="#">Sous-Menu 4.1</a>
    3. </div>
    4. <div class="sousmenu">
    5. <a href="#">Sous-Menu 4.2</a>
    6. </div>
    7. <div class="sousmenu">
    8. <a href="#">Sous-Menu 4.3</a>
    9. </div>


    et cela fonctionne !
    m
    0
    l
    31 Octobre 2009 22:28:08

    et pour ton problème de sourie moi mon curseur reste ou il été quand je suis alé sur le menu !! ou j'ai mal compris
    sinon je sais pas pour sa !
    :whistle: 
    m
    0
    l
    31 Octobre 2009 22:31:25

    Et pour les sous menus qui restent afficher ? Et pour enlever des menus ?
    m
    0
    l
    31 Octobre 2009 22:36:30

    sasuke-uchiwa-itachi a dit :
    Et pour les sous menus qui restent afficher ?


    deja repondu

    sasuke-uchiwa-itachi a dit :
    Et pour enlever des menus ?


    2min je repond tt de suite


    m
    0
    l
    31 Octobre 2009 22:46:32

    exemple pour le menu 5 que je t'ai montrai comment ajouté comment ajouté ba tu fait l'inverse tu suprime cette parti :
    1. <div class="menu" id="menu5" onmouseover="affiche(this)">
    2. <a href="#">Menu 5</a>
    3. </div>
    4. <div id="sousmenu5" style="display:none">
    5. <div class="sousmenu">
    6. <a href="#">Sous-Menu 5.1</a>
    7. </div>
    8. <div class="sousmenu">
    9. <a href="#">Sous-Menu 5.2</a>
    10. </div>
    11. <div class="sousmenu">
    12. <a href="#">Sous-Menu 5.3</a>
    13. </div>
    14. <div class="sousmenu">
    15. <a href="#">Sous-Menu 5.4</a>
    16. </div>
    17. </div>


    et tu pense a modifié

    1. for(var i = 1; i <= 5; i++)
    en
    1. for(var i = 1; i <= 4; i++)
    m
    0
    l
    31 Octobre 2009 23:00:15

    rolala je comprend plus rien --"
    Voici mon code:
    1. <div id="menu">
    2. <div class="menu" id="menu1" onmouseover="affiche(this)">
    3. <a href="#">Acceuil</a>
    4. </div>
    5. <div id="sousmenu1" style="display:none">
    6. <div class="sousmenu">
    7. <a href="#">Sous-Menu 1.1</a>
    8. </div>
    9. <div class="sousmenu">
    10. <a href="#">Sous-Menu 1.2</a>
    11. </div>
    12. <div class="sousmenu">
    13. <a href="#">Sous-Menu 1.3</a>
    14. </div>
    15. <div class="sousmenu">
    16. <a href="#">Sous-Menu 1.4</a>
    17. </div>
    18. </div>
    19. <div class="menu" id="menu2" onmouseover="affiche(this)">
    20. <a href="#">Animes</a>
    21. </div>
    22. <div id="sousmenu2" style="display:none">
    23. <div class="sousmenu">
    24. <a href="#">Naruto</a>
    25. </div>
    26. <div class="sousmenu">
    27. <a href="#">Death Note</a>
    28. </div>
    29. </div>
    30. <div class="menu" id="menu3" onmouseover="affiche(this)">
    31. <a href="#">Clips</a>
    32. </div>
    33. <div id="sousmenu3" style="display:none">
    34. <div class="sousmenu">
    35. <a href="#">UVERworld</a>
    36. </div>
    37. <div class="sousmenu">
    38. <a href="#">Dong Bang Shin Ki</a>
    39. </div>
    40. <div class="sousmenu">
    41. <a href="#">SHINee</a>
    42. </div>
    43. </div>
    44. <div class="menu" id="menu4" onmouseover="affiche(this)">
    45. <a href="#">Menu 4</a>
    46. </div>
    47. <div id="sousmenu4" style="display:none">
    48. <div class="sousmenu">
    49. <a href="#">Sous-Menu 4.1</a>
    50. </div>
    51. <div class="sousmenu">
    52. <a href="#">Sous-Menu 4.2</a>
    53. </div>
    54. <div class="sousmenu">
    55. <a href="#">Sous-Menu 4.3</a>
    56. </div>
    57. </div>
    58. </div>


    Est ce que tu peux m'enlever tout les sous menu de l'acceuil stp sans enlever le menu acceuil ?
    Et je sais plus ce qu'il faut faire pour les sous menus qui rentent afficher.
    m
    0
    l
    31 Octobre 2009 23:04:09

    Rah c'est bon j'est réussi à enlever les sous menu, j'ai mis du temps --'
    Je suis vraiment crever, je suis là dessus depuis ce matin.
    Maintenant, je sais plus pour pas que sa reste afficher.
    Tu peux me traiter d'abrutit, sa me gène pas, je me le dis souvent -_-''
    m
    0
    l
    31 Octobre 2009 23:07:38

    mdr , c'est le code JS que tu a oublié de modifié !
    m
    0
    l
    31 Octobre 2009 23:09:22

    Est ce que c'est possible que tu me reffase tout le code html et javascript stp avec 3 menu : 1 sans sous menu, et les autres avec des sous menu stp.
    m
    0
    l
    31 Octobre 2009 23:13:48

    ok , pas de problème !!
    m
    0
    l
    31 Octobre 2009 23:15:02

    Merci, parce que là, je ne suis pas du tout en état de réfléchir lol
    m
    0
    l
    31 Octobre 2009 23:22:39

    Donc voila le code html, j'ai gardé le nom de tes menu, et sous menu d'un de tes precedents postes =>

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" rel="nofollow" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
    2. <html xmlns="<a href="http://www.w3.org/1999/xhtml" rel="nofollow" target="_blank">http://www.w3.org/1999/xhtml</a>" xml:lang="fr" lang="fr">
    3. <head>
    4. <title>Menu déroulant vertical sur clic</title>
    5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    6. <link rel="stylesheet" href="style.css" type="text/css" />
    7. <script type="text/javascript" src="functions.js"></script>
    8. </head>
    9. <body>
    10.  
    11. <div id="menu">
    12. <div class="menu" id="menu1" onmouseover="affiche(this)">
    13. <a href="#">Acceuil</a>
    14. </div>
    15. <div class="menu" id="menu2" onmouseover="affiche(this)">
    16. <a href="#">Animes</a>
    17. </div>
    18. <div id="sousmenu2" style="display:none">
    19. <div class="sousmenu">
    20. <a href="#">Naruto</a>
    21. </div>
    22. <div class="sousmenu">
    23. <a href="#">Death Note</a>
    24. </div>
    25. </div>
    26. <div class="menu" id="menu3" onmouseover="affiche(this)">
    27. <a href="#">Clips</a>
    28. </div>
    29. <div id="sousmenu3" style="display:none">
    30. <div class="sousmenu">
    31. <a href="#">UVERworld</a>
    32. </div>
    33. <div class="sousmenu">
    34. <a href="#">Dong Bang Shin Ki</a>
    35. </div>
    36. <div class="sousmenu">
    37. <a href="#">SHINee</a>
    38. </div>
    39. </div>
    40. </div>
    41.  
    42. </body>
    43. </html>


    et pour le code JavaScript =>

    1. function affiche(obj){
    2. var id = obj.id;
    3.  
    4. for(var i = 2; i <= 3; i++){
    5. document.getElementById('sousmenu'+i).style.display = "none";
    6. }
    7.  
    8. if(document.getElementById('sous'+id)){
    9. document.getElementById('sous'+id).style.display = "block";
    10. }
    11. }
    m
    0
    l
    31 Octobre 2009 23:35:27

    Donc c'est ce que j'avais fait ^^' sauf pour le JS. Par contre, sa ne se ferme pas tout seul quand on sort des sous menu ... mais ce n'est pas très grave.
    m
    0
    l
    31 Octobre 2009 23:42:26

    Petite chose, voici mon code CSS :
    1. #menu{
    2. width:150px;
    3. margin:0px auto 0 auto;
    4. float: left;
    5. border: 2px solid #FFFFFF;
    6. }
    7. .menu, .sousmenu{
    8. text-align:center;
    9. }
    10. .menu{
    11. height:50px;
    12. width:150px;
    13. padding:2px 0;
    14. color:#F00;
    15. }
    16. .sousmenu{
    17. height:18px;
    18. width:150px;
    19. padding:1px 0;
    20. color:#000000;
    21. }
    22. .menu a{
    23. display:block;
    24. width:100%;
    25. height:100%;
    26. color:#F00;
    27. font-family:arial,sans-serif;
    28. font-size:40px;
    29. font-weight:bold;
    30. text-decoration:none;
    31. background:#000000;
    32. }
    33. .sousmenu a{
    34. display:block;
    35. width:100%;
    36. height:100%;
    37. color:#1AB515;
    38. font-family:arial,sans-serif;
    39. font-size:12px;
    40. font-weight:bold;
    41. text-decoration:none;
    42. background: #000000;
    43. }
    44. .menu a:hover, .sousmenu a:hover, .menu a:active, .sousmenu a:active, .menu a:focus, .sousmenu a:focus{
    45. }


    Si dans ce code, à la place de 12px, je met 15, voici ce que sa donne :
    1. .sousmenu a{
    2. display:block;
    3. width:100%;
    4. height:100%;
    5. color:#1AB515;
    6. font-family:arial,sans-serif;
    7. [color=#ff0400] font-size:12px;[/color]
    8. font-weight:bold;
    9. text-decoration:none;
    10. background: #000000;
    11. }


    Et dans ce code, à la place de 40 je met 20 :
    1. .menu a{
    2. display:block;
    3. width:100%;
    4. height:100%;
    5. color:#F00;
    6. font-family:arial,sans-serif;
    7. [color=#ff0400] font-size:40px;[/color]
    8. font-weight:bold;
    9. text-decoration:none;
    10. background:#000000;
    11. }


    Et bien, essaye avec ce code, et tu verra qu'il y à de l'écart entre les menu, justement, comment réduire cet écart stp ?
    m
    0
    l
    31 Octobre 2009 23:42:44

    ba le JS j'ai juste mis 2 pour "ignoré" le menu 1 pour les sous menu et 3 car il y a 3 menu !
    simple non !
    c'est plutot mon explication qui est pas trés clair ! ^^
    m
    0
    l
    31 Octobre 2009 23:44:27

    ^^ J'ai pas encore appris le JS :D 
    Si non, regarde mon second post en dessous :D 
    m
    0
    l
        • 1 / 2
        • 2
        • Dernier
    Tom's guide dans le monde
    • Allemagne
    • Italie
    • Irlande
    • Royaume Uni
    • Etats Unis
    Suivre Tom's Guide
    Inscrivez-vous à la Newsletter
    • ajouter à twitter
    • ajouter à facebook
    • ajouter un flux RSS