menu déroulant

Répondre
Suta
le 26/12/2005 à 23:28
Suta
Déconnecté
bonjour

je suis novice en js
et
Jai un probleme sur un menu deroulant en javascript :

jai une structure de ce genre :

parent1
-lien1
-lien2
parent2
-lien1
-lien2

etc...

je voudrai que la police des "parents" change au survole de la souris

faut il que je change quelque chose dans cette partie de la source ?

  1.  
  2. <STYLE>
  3. <!--
  4. .parent {
  5. font-family: verdana;
  6. font-weight: bold;
  7. font-size: 10pt;
  8. margin-top: 10;
  9. cursor: hand;
  10. }
  11.  
  12. .child {
  13. font-size: 10pt;
  14. font-weight: normal;
  15. margin-left: 14pt;
  16. }
  17.  
  18. a:hover{ color:red; }
  19. -->
  20. </STYLE>
  21.  


merci de votre aide

sinon ben voila la source :

  1. <HTML>
  2. <HEAD>
  3. <TITLE>Test de menu dynamique</TITLE>
  4. <STYLE>
  5. <!--
  6. .parent {
  7. font-family: verdana;
  8. font-weight: bold;
  9. font-size: 10pt;
  10. margin-top: 10;
  11. cursor: hand;
  12. }
  13.  
  14. .child {
  15. font-size: 10pt;
  16. font-weight: normal;
  17. margin-left: 14pt;
  18. }
  19.  
  20. a:hover{ color:red; }
  21. -->
  22. </STYLE>
  23.  
  24. <SCRIPT LANGUAGE=javascript>
  25. <!--
  26. var intCount = 0;
  27.  
  28. //-Fonction d'ajout d'entrées principales-------------------------
  29. function DynamicMenu_addParent(strName) {
  30. var strID = 'ID' + intCount++;
  31.  
  32. var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
  33. strTemp += ' onClick="expandCollapse(this);">';
  34. strTemp += '<IMG SRC="Graphics/left.gif" Height="12">';
  35. strTemp += '&nbsp;' + strName ;
  36. strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
  37. strTemp += '</DIV>';
  38.  
  39. this.div.innerHTML += strTemp;
  40. this.currentChild = document.getElementById(strID);
  41. }
  42.  
  43. //-Fonction d'ajoutde liens dans le menu-------------------------
  44. function DynamicMenu_addChild(strName,strURL) {
  45. var strTemp = '<A HREF="' + strURL + '"'
  46. + ' onClick="cancelBubble(arguments[0]);">'
  47. + strName + '</A><BR>';
  48.  
  49. if (document.all) {
  50. this.currentChild.children[1].innerHTML += strTemp;
  51. } else {
  52. this.currentChild.childNodes[2].innerHTML += strTemp;
  53. }
  54. }
  55.  
  56. //-inhibe la cascade d'évènements au DIV conteneur----------------
  57. function cancelBubble(netEvent) {
  58. if (document.all) {
  59. window.event.cancelBubble = true;
  60. } else {
  61. netEvent.cancelBubble = true;
  62. }
  63. }
  64.  
  65. //-Contracte ou expanse le menu-----------------------------------
  66. function expandCollapse(objElement) {
  67. if (document.all) {
  68. var imgIcon = objElement.children[0];
  69. objElement = objElement.children[1];
  70. } else {
  71. var imgIcon = objElement.childNodes[0];
  72. objElement = objElement.childNodes[2];
  73. }
  74.  
  75. if (objElement.style.display == "none") {
  76. objElement.style.display = "block" ;
  77. imgIcon.src = "Graphics/bottom.gif" ;
  78. } else {
  79. objElement.style.display = "none" ;
  80. imgIcon.src = "Graphics/left.gif" ;
  81. }
  82. }
  83.  
  84. //-Fonction de création de menu dynamique-------------------------
  85. function DynamicMenu() {
  86. var id = "Menu" + intCount++;
  87. document.write('<DIV Id="' + id + '"></DIV>');
  88.  
  89. this.div = document.getElementById(id);
  90. this.currentChild = null;
  91.  
  92. this.addParent = DynamicMenu_addParent;
  93. this.addChild = DynamicMenu_addChild;
  94. }
  95. // -->
  96. </SCRIPT>
  97. </HEAD>
  98. <BODY>
  99. <SCRIPT Language="Javascript">
  100. <!--
  101. var menu = new DynamicMenu();
  102.  
  103. menu.addParent("Le langage Javascript");
  104. menu.addChild("Page d'accueil",
  105. "../javascript.html");
  106. menu.addChild("Etude du langage",
  107. "../Langage/ecmascript.html");
  108. menu.addChild("Les objetsclients",
  109. "../ObjetsClients/javascript.html");
  110. menu.addChild("La bibliothèque de code",
  111. "../Bibliotheque/index.html");
  112. menu.addChild("Le fabuleux J-Project",
  113. "../J-Project/jproject.html");
  114.  
  115. menu.addParent("Autres langages du Web");
  116. menu.addChild("Le langage HTML",
  117. "../../Html/index.html");
  118. menu.addChild("Le langage XML",
  119. "../../Xml/index.html");
  120. menu.addChild("Le langage CSS",
  121. "../../Css/styles.html");
  122.  
  123. menu.addParent("Quelques petits jeux");
  124. menu.addChild("Dynamic PingPong",
  125. "../../../../../Programmes/Jeux/PingPong/PingPong.html");
  126. menu.addChild("Casse briques", "gamesCasseBriques.html");
  127. //-->
  128. </SCRIPT>
  129. </BODY>
  130. </HTML>
  131.  
Bzh
le 29/12/2005 à 00:55
Bzh
Déconnecté
Wouah !!! Tout d'abord bravo c'est vraiment du très beau js !!!

Ensuite, je vois deux solutions pour ton problème.

Le premier utiliser la balise <a> exemple=>
  1. <a href="javascript:ta_fonction()">Le titre de ton menu</a> 

Dans ce cas là, tu fais appel à la propriété CSS "hover" !!!!

Un "hover" sur un div ne fonctionne pas avec Internet Explorer (Ca, c'est étonnant) !!!!

Sinon, la deuxième solution est de continuer en javascript.

Voila le code=>

  1. <HTML>
  2. <HEAD>
  3. <TITLE>Test de menu dynamique</TITLE>
  4. <STYLE>
  5. <!--
  6. .parent {
  7. font-family: verdana;
  8. font-weight: bold;
  9. font-size: 10pt;
  10. margin-top: 10;
  11. cursor: hand;
  12. }
  13.  
  14. .child {
  15. font-size: 10pt;
  16. font-weight: normal;
  17. margin-left: 14pt;
  18. }
  19.  
  20. a:hover{ color:red; }
  21. -->
  22. </STYLE>
  23.  
  24. <SCRIPT LANGUAGE=javascript>
  25. <!--
  26. var intCount = 0;
  27.  
  28. //-Fonction modification au passage de la sourie------------------
  29. function Div_background( div, action ){
  30.  
  31. if( action ){ div.style.background = "#FFF000"; }
  32. else{ div.style.background = "#FFFFFF"; }
  33.  
  34. }
  35.  
  36. //-Fonction d'ajout d'entrées principales-------------------------
  37. function DynamicMenu_addParent(strName) {
  38. var strID = 'ID' + intCount++;
  39.  
  40. var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
  41. strTemp += ' onMouseOver="Div_background(this, 1);"';
  42. strTemp += ' onMouseOut="Div_background(this, 0);"';
  43. strTemp += ' onClick="expandCollapse(this);">';
  44. strTemp += '<IMG SRC="Graphics/left.gif" Height="12">';
  45. strTemp += '&nbsp;' + strName ;
  46. strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
  47. strTemp += '</DIV>';
  48.  
  49. this.div.innerHTML += strTemp;
  50. this.currentChild = document.getElementById(strID);
  51. }
  52.  
  53. //-Fonction d'ajout de liens dans le menu-------------------------
  54. function DynamicMenu_addChild(strName,strURL) {
  55. var strTemp = '<A HREF="' + strURL + '"'
  56. + ' onClick="cancelBubble(arguments[0]);">'
  57. + strName + '</A><BR>';
  58.  
  59. if (document.all) {
  60. this.currentChild.children[1].innerHTML += strTemp;
  61. } else {
  62. this.currentChild.childNodes[2].innerHTML += strTemp;
  63. }
  64. }
  65.  
  66. //-inhibe la cascade d'évènements au DIV conteneur----------------
  67. function cancelBubble(netEvent) {
  68. if (document.all) {
  69. window.event.cancelBubble = true;
  70. } else {
  71. netEvent.cancelBubble = true;
  72. }
  73. }
  74.  
  75. //-Contracte ou expanse le menu-----------------------------------
  76. function expandCollapse(objElement) {
  77. if (document.all) {
  78. var imgIcon = objElement.children[0];
  79. objElement = objElement.children[1];
  80. } else {
  81. var imgIcon = objElement.childNodes[0];
  82. objElement = objElement.childNodes[2];
  83. }
  84.  
  85. if (objElement.style.display == "none") {
  86. objElement.style.display = "block" ;
  87. imgIcon.src = "Graphics/bottom.gif" ;
  88. } else {
  89. objElement.style.display = "none" ;
  90. imgIcon.src = "Graphics/left.gif" ;
  91. }
  92. }
  93.  
  94. //-Fonction de création de menu dynamique-------------------------
  95. function DynamicMenu() {
  96. var id = "Menu" + intCount++;
  97. document.write('<DIV Id="' + id + '"></DIV>');
  98.  
  99. this.div = document.getElementById(id);
  100. this.currentChild = null;
  101.  
  102. this.addParent = DynamicMenu_addParent;
  103. this.addChild = DynamicMenu_addChild;
  104. }
  105. // -->
  106. </SCRIPT>
  107. </HEAD>
  108. <BODY>
  109.  
  110. <SCRIPT Language="Javascript">
  111. <!--
  112. var menu = new DynamicMenu();
  113.  
  114. menu.addParent("Le langage Javascript");
  115. menu.addChild("Page d'accueil",
  116. "../javascript.html");
  117. menu.addChild("Etude du langage",
  118. "../Langage/ecmascript.html");
  119. menu.addChild("Les objetsclients",
  120. "../ObjetsClients/javascript.html");
  121. menu.addChild("La bibliothèque de code",
  122. "../Bibliotheque/index.html");
  123. menu.addChild("Le fabuleux J-Project",
  124. "../J-Project/jproject.html");
  125.  
  126. menu.addParent("Autres langages du Web");
  127. menu.addChild("Le langage HTML",
  128. "../../Html/index.html");
  129. menu.addChild("Le langage XML",
  130. "../../Xml/index.html");
  131. menu.addChild("Le langage CSS",
  132. "../../Css/styles.html");
  133.  
  134. menu.addParent("Quelques petits jeux");
  135. menu.addChild("Dynamic PingPong", 
  136. "../../../../../Programmes/Jeux/PingPong/PingPong.html");
  137. menu.addChild("Casse briques", "gamesCasseBriques.html");
  138. //-->
  139. </SCRIPT>
  140. </BODY>
  141. </HTML> 


Voila, j'espère que ça répond à ta question...

Bye...
Suta
le 07/02/2006 à 03:13
Suta
Déconnecté
Merci beaucoup pour ton aide

(Un peu en retard ^^ les remerciment hem...)
Répondre
Accès rapide :

Remonter Remonter
L'éditeur javascript - CSS - Gentoo - Tutoriaux PHP - Tutoriels PHP - Breizh Blog