[XHTML/CSS/JS] menu déroulant

menu déroulant [XHTML/CSS/JS] - HTML/CSS - Programmation

Marsh Posté le 23-11-2004 à 14:13:44    

bonjour
 
je développe un site, et j'ai envie d'y coller des menus déroulants.
Comme j'aime bien développer seul, j'aime bien ne pas prendre des codes tout faits sur le net. Donc je me suis attelé à la tâche, et la première difficulté apparaît.
 
Voilà le site tel qu'il devrai apparaître (plus ou moins, y'a un bout de bleu/gris à droite du menu principal qui devrait etre noir, mais c'est secondaire) :
 
http://cosmo0.free.fr/divers/hopi-01.jpg
 
donc ça c'est sous firefox, ça marche.
 
Voilà le site tel qu'il apparaît sous IE :
 
http://cosmo0.free.fr/divers/hopi-02.jpg
 
comme vous le voyez, c'est pas tout à fait ça :o
 
voici donc le code concerné :
 
index.php

Code :
  1. [code effacé pour plus de clarté]


 
et maintenant (ta-daaaa) le fichier css :
 
basic.css

Code :
  1. [idem]


 
Si vous avez une solution pour que l'image du haut reste centrée, et que les sous-menus restent dans la fenêtre, vous auriez toute mon affection  [:atsuko]  
 
Merci !


Message édité par cosmoschtroumpf le 26-11-2004 à 16:22:19
Reply

Marsh Posté le 23-11-2004 à 14:13:44   

Reply

Marsh Posté le 23-11-2004 à 15:00:03    

ma solution pour contourner ce problème :
fusionner les 2 menus et les imbirqués (il serait plus logique à lire, et on s'approcherait des standards du web)
 

Code :
  1. <div id="menus">
  2.   <ul>
  3.     <li>
  4.       <a href="#">accueil</a>
  5.       <ul>
  6.         <li><a href="#">vos pi&egrave;ces</a></li>
  7.         <li><a href="#">vos armoires</a></li>
  8.         <li><a href="#">vos chaussures</a></li>
  9.       </ul>
  10.     </li>
  11.     <li>
  12.       <a href="#" id="lienUtilisations">utilisations</a>
  13.       <ul>
  14.         <li><a href="#">containers</a></li>
  15.         <li><a href="#">cartons</a></li>
  16.         <li><a href="#">fleurs coupées</a></li>
  17.       </ul>
  18.     </li>
  19.     <li>
  20.       <a href="#" id="lienEspacepro">espace pro</a>
  21.       <ul>
  22.         <li><a href="#">containers</a></li>
  23.         <li><a href="#">cartons</a></li>
  24.         <li><a href="#">fleurs coupées</a></li>
  25.       </ul>
  26.     </li>
  27.     <li>
  28.       <a href="#" id="lienProduits">produits</a>
  29.       <ul>
  30.         <li><a href="#">adsobeur d'humidité</a></li>
  31.         <li><a href="#">absorbeur d'éthylène</a></li>
  32.         <li><a href="#">antigel béton</a></li>
  33.         <li><a href="#">gel silice vrac</a></li>
  34.       </ul>
  35.     </li>
  36.     <li>
  37.       <a href="#">contact</a>
  38.     </li>
  39.   </ul>
  40. </div>


 
y'a plus qu'a modifier le css et fonction.
pour la dynamique du menu, on pourrait de passer de javascript grace au li:hover, mais IE ne l'entend pas de cette oreille.

Reply

Marsh Posté le 23-11-2004 à 15:18:07    

effectivement c'est plus logique, mais, mmhhh, ca va être le bonheur à modifier tout ça :D
 
bon, je vais déjà essayer avec ça ce que je peux faire, merci ;)
 
pour la dynamique, là je vais essayer de positionner correctement les éléments, la dynamique on verra plus tard :D


Message édité par cosmoschtroumpf le 23-11-2004 à 15:18:46
Reply

Marsh Posté le 23-11-2004 à 16:04:15    

bon, j'ai modifié avec le code donné au-dessus, j'ai réussi à le remettre d'applomb sur mozilla, mais IE c'est encore pire, je vois même plus les sous-menus :
 
basic.css

Code :
  1. hop, à dégager


 
 
index.php - partie menu

Code :
  1. hop, voir plus bas pour le code actuel


 
 
merci ! [:zytra]  
 
 
Edit : si il y en a qui sauraient aussi comment mettre du noir à droite des principaux éléments du menu sous mozilla, comme ça le fait sous IE, ça peut m'aider.
merci


Message édité par cosmoschtroumpf le 24-11-2004 à 14:05:02
Reply

Marsh Posté le 24-11-2004 à 10:32:32    

En attendant d'avoir une réponse, j'ai commencé à intégrer le javascript, et là, ça marche sous IE :heink:
bon, tant mieux. Mais j'ai toujours un petit problème.
 
J'ai mis un timeout sur mon code JS sur le onmouseout des liens du menu principal, pour cacher le sous-menu après 3 secondes si la souris quitte le menu. Le problème, c'est que  une fois sur deux, et même 3 fois sur 4, le sous-menu se recache un peu n'importe quand. Voilà mon code :
 
menu.php

Code :
  1. <body onload="cacherMenus()" onclick="cacherMenus">
  2. <ul id="menus">
  3. <li><a href="index.php" onMouseOver="cacherMenus()">accueil</a></li>
  4. <li><a href="#" id="lienUtilisations" onMouseOver="montrerMenu('ssMenuUtilisations')" onMouseOut="timeoutMenu()">utilisations</a>
  5.  <ul id="ssMenuUtilisations" onMouseOver="killTimeout()">
  6.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">vos pi&egrave;ces</a></li>
  7.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">vos armoires</a></li>
  8.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">vos chaussures</a></li>
  9.  </ul>
  10. </li>
  11. <li><a href="#" id="lienEspacepro" onMouseOver="montrerMenu('ssMenuEspacepro')" onMouseOut="timeoutMenu()">espace pro</a>
  12.  <ul id="ssMenuEspacepro" onMouseOver="killTimeout()">
  13.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">containers</a></li>
  14.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">cartons</a></li>
  15.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">fleurs coupées</a></li>
  16.  </ul>
  17. </li>
  18. <li><a href="#" id="lienProduits" onMouseOver="montrerMenu('ssMenuProduits')" onMouseOut="timeoutMenu()">produits</a></li>
  19.  <ul id="ssMenuProduits" onMouseOver="killTimeout()">
  20.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">adsobeur d'humidité</a></li>
  21.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">absorbeur d'éthylène</a></li>
  22.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">antigel béton</a></li>
  23.   <li><a href="#" onClick="cacherMenus()" onMouseOver="killTimeout()">gel silice vrac</a></li>
  24.  </ul>
  25. <li><a href="#" onMouseOver="cacherMenus()">contact</a></li>
  26. </ul>
  27. </body>


 
menus.js

Code :
  1. /* Javascript : fonctionnement des menus déroulants */
  3. /***************************************************
  4. *         Fonctionnement du code :                 *
  5. ****************************************************
  6. * 1 on lance un cacherMenus() au lancement         *
  7. * de la page                                       *
  8. * 2 au survol d'un lien qui ouvre un sous-menu, on *
  9. * lance montrerMenu('menu')
  10. * 3 quand la souris sort du survol du lien, on
  11. * lance timeoutMenu()
  12. * 4 quand la souris pointe sur un élément du
  13. * sous-menu, on lance killTimeout()
  14. * 5 quand on clique sur un lien du sous-menu, on
  15. * lance cacherMenus()
  16. **************************************************/
  18. timer = null;
  19. timerRunning = false;
  21. /*
  22. * CACHERMENUS
  23. * BUT : cacher tous les menus
  24. */
  25. function cacherMenus() {
  26. timerRunning = false;
  27. document.getElementById('ssMenuUtilisations').style.visibility = "hidden";
  28. document.getElementById('ssMenuEspacepro').style.visibility = "hidden";
  29. document.getElementById('ssMenuProduits').style.visibility = "hidden";
  30. }
  32. /*
  33. * MONTRERMENU
  34. * BUT : montrer un menu
  35. * E : string menuId, l'id du menu à montrer
  36. */
  37. function montrerMenu(menuId) {
  38. cacherMenus();
  39. document.getElementById(menuId).style.visibility = "visible";
  40. }
  42. /*
  43. * TIMEOUTMENU
  44. * BUT : lorsque la souris quitte le lien principal,
  45. * 3 secondes pour rentrer sur le sous-menu ou le menu se cache
  46. */
  47. function timeoutMenu() {
  48. timer = setTimeout("cacherMenus()",3000);
  49. timerRunning = true;
  50. }
  52. /*
  53. * KILLTIMEOUT
  54. * BUT : lorsque la souris passe sur le sous-menu,
  55. * arrêt du décompte avant masquage de celui-ci
  56. */
  58. function killTimeout() {
  59. if (timerRunning) {
  60.  clearTimeout(timer);
  61. }
  62. }


 
menus.css

Code :
  1. /****************************************
  2. * balises, classes générales
  3. ****************************************/
  5. * {
  6. font-family: arial, helvetica, sans-serif;
  7. font-size: small;
  8. }
  9. body {
  10. background: #D9DFE1 url('../images/bandeau.jpg') no-repeat center top;
  11. text-align: center;
  12. margin: 0;
  13. width: 760px;
  14. margin-left: auto;
  15. margin-right: auto;
  16. padding-left: auto;
  17. padding-right: auto;
  18. padding-top: 100px;
  19. }
  21. /****************************************
  22. * Menus
  23. ****************************************/
  25. #menus {
  26. position: relative;
  27. top: 0;
  28. background-color: #000;
  29. width: 760px;
  30. padding: 0;
  31. margin: 0;
  32. }
  33. #menus li {
  34. list-style-type: none;
  35. padding: 0;
  36. margin: 0;
  37. float: left;
  38. width: 125px;
  39. }
  40. #menus a {
  41. border-right: 1px solid #fff;
  42. width: 124px;
  43. background-color: #000;
  44. color: #fff;
  45. float: left;
  46. }
  47. #menus a:hover {
  48. color: #ccc;
  49. }
  51. a:hover#lienUtilisations {
  52. color: #f00;
  53. }
  54. a:hover#lienEspacepro {
  55. color: #0f0;
  56. }
  57. a:hover#lienProduits {
  58. color: #00f;
  59. }
  61. /* MENUS SECONDAIRES */
  63. #ssMenuUtilisations, #ssMenuEspacepro, #ssMenuProduits {
  64. position: absolute;
  65. top: 1.2em;
  66. width: 120px;
  67. padding: 0;
  68. margin: 0 0 0 2px;
  69. }
  70. #ssMenuUtilisations li, #ssMenuEspacepro li, #ssMenuProduits li {
  71. list-style-type: none;
  72. text-align: left;
  73. background-color: #fff;
  74. padding: 0;
  75. margin: 0;
  76. }
  77. #ssMenuUtilisations a, #ssMenuEspacepro a, #ssMenuProduits a {
  78. border: solid #000;
  79. border-width: 0 2px 1px 2px;
  80. font-weight: normal;
  81. color: #000;
  82. float:left;
  83. padding: 0 0 0 2px;
  84. background-color: #fff;
  85. }
  86. #ssMenuUtilisations a:hover {
  87. border-color: #f00;
  88. border-bottom: 1px solid #000;
  89. background-color: #966;
  90. color: #fff;
  91. }
  92. #ssMenuEspacepro a:hover {
  93. border-color: #0f0;
  94. border-bottom: 1px solid #000;
  95. background-color: #696;
  96. color: #fff;
  97. }
  98. #ssMenuProduits a:hover {
  99. border-color: #00f;
  100. border-bottom: 1px solid #000;
  101. background-color: #669;
  102. color: #fff;
  103. }
  104. #ssMenuUtilisations {
  105. left: 120px;
  106. }
  107. #ssMenuEspacepro {
  108. left: 245px;
  109. }
  110. #ssMenuProduits {
  111. left: 370px;
  112. }


 
j'ai essayé de mettre un timer par menu, en me disant que mon code s'embrouillait dans les timouts et en déclenchait un au milieu de l'arrêt de l'autre ou je ne sais quoi, mais ça me faisait pareil.
 
 
et puis j'ai toujours un bout de fond gris à droite du menu principal sous mozilla, alors qu'il devrait être noir  [:dawa]  
 
Merci !


Message édité par cosmoschtroumpf le 24-11-2004 à 14:06:33
Reply

Marsh Posté le 24-11-2004 à 14:07:17    

un ptit up parce que je n'ai toujours pas de solution :whistle:

Reply

Marsh Posté le 25-11-2004 à 09:56:38    

allez soyez cools quoi :D

Reply

Marsh Posté le 25-11-2004 à 12:24:46    

tu vas sur le site d'alsacréation où il y a déjà des menus tout faits et super simples en style css qui fonctionnent très bien sur firefox et ie...
pkoi réinventer la roue à tout prix ??

Reply

Marsh Posté le 25-11-2004 à 12:51:07    

pourquoi toujours utiliser le travail des autres ? :o

Reply

Marsh Posté le 25-11-2004 à 13:03:01    

titione a écrit :

tu vas sur le site d'alsacréation où il y a déjà des menus tout faits et super simples en style css qui fonctionnent très bien sur firefox et ie...
pkoi réinventer la roue à tout prix ??


 
Pour comprendre comment ça marche, faire des progrès et ensuite être capable de faire des nouveaux trucs ?  :whistle:

Reply

Marsh Posté le 25-11-2004 à 13:03:01   

Reply

Marsh Posté le 25-11-2004 à 13:03:03    

cosmoschtroumpf a écrit :

pourquoi toujours utiliser le travail des autres ? :o


pourquoi ne pas t'en inspirer pour savoir comment faire ca proprement, de manière standard et en conservant une compatibilité correcte trans-navigateurs? [:djmb]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 25-11-2004 à 13:11:56    

Attention masklinn, s'inspirer d'un travail est très différent de l'utiliser. titione me proposait d'utiliser les menus d'alascréation. J'ai dit que je n'allais pas les utiliser, mais m'en insipirer, certainement.
 
 
Et puis, ce n'est pas parce que je ne regarde pas le travail des autres que je ne sais pas faire ça "proprement, de manière standard et en conservant une compatibilité correcte trans-navigateurs". Plutôt que de sous-entendre que mon menu n'est pas propre, pas standard et pas compatible, dis-moi ce qui ne va pas, plutôt que de me dire "Va voir chez les autres, et surtout n'essaye pas d'en faire plus". Si je n'essaye jamais par moi-même, quelle sorte de programmeur suis-je ? [:figti] (à part "un mauvais"...)


Message édité par cosmoschtroumpf le 25-11-2004 à 13:13:09
Reply

Marsh Posté le 25-11-2004 à 13:12:07    

franchement là c un bout de code de 15 lignes avec 50 lignes de css... donc effectivement c facile à comprendre et facilement customisable à souhait !
après si tu ne veux pas utiliser le travail des autres, ben t'as plus qu'à devenir ermite sur ton île déserte :)) c le seul moyen de rencontrer personne et de ne pas utiliser le travail des autres...

Reply

Marsh Posté le 25-11-2004 à 13:15:06    

argh ! mais pourquoi absolument utiliser l'existant ? Je veux pas copier, je veux créer !
J'ai pas dit que je ne jetterais pas un oeil sur le menu, d'ailleurs j'avais déjà regardé bien des codes de menus déroulants avant de me lancer, mais par pitié, épargnez-moi les "prends ce code et tais-toi" !
 
ma question n'était pas "où trouver un code de menu déroulant sympa", mais "comment optimiser mon code qui est lui aussi facile à comprendre et customisable à souhait, et qui surtout, fait exactement ce que je veux" !


Message édité par cosmoschtroumpf le 25-11-2004 à 13:16:52
Reply

Marsh Posté le 25-11-2004 à 13:20:01    

titione a écrit :

franchement là c un bout de code de 15 lignes avec 50 lignes de css... donc effectivement c facile à comprendre et facilement customisable à souhait !
après si tu ne veux pas utiliser le travail des autres, ben t'as plus qu'à devenir ermite sur ton île déserte :)) c le seul moyen de rencontrer personne et de ne pas utiliser le travail des autres...


 
Je ne suis pas d'accord.  
 
Que ce soit un script pour un bête rollover, un menu ou n'importe quoi d'autre, il FAUT le faire soi-même et comprendre toutes les subtilités. C'est la seule manière de progresser.
 
Et puis, ce n'est pas une perte de temps, vu qu'en suite, on réutilise SES PROPRES scripts en connaissant parfaitement les qualités et les défauts ainsi que les possibilités d'adaptation.

Reply

Marsh Posté le 25-11-2004 à 14:55:24    

Note qu'il serait intéréssant que tu fasse une "factorisation" de ton code javascript.
Il y a un article intéréssant à ce propos sur pompage.net:
http://www.pompage.net/pompe/separation/


Message édité par Ayuget le 25-11-2004 à 14:55:57
Reply

Marsh Posté le 25-11-2004 à 15:33:16    

mouais, je vais essayer de faire ça.
thx

Reply

Marsh Posté le 25-11-2004 à 16:36:06    

Ayuget a écrit :

Note qu'il serait intéréssant que tu fasse une "factorisation" de ton code javascript.
Il y a un article intéréssant à ce propos sur pompage.net:
http://www.pompage.net/pompe/separation/


 
excellent article que je bookmarque sur le champ.  :)

Reply

Marsh Posté le 25-11-2004 à 16:46:40    

j'ai une question sur cet article, puisque je ne trouve pas le mail du gars : quand je fais window.onload = initMenu(); ça me fait des tas d'erreurs, et quand je fais window.onload = initMenus;, ça marche, alors que je m'attendrais plutôt à l'inverse :heink:

Reply

Marsh Posté le 25-11-2004 à 17:06:56    

et avec window.onload = initMenus(); [:ddr555]

Reply

Marsh Posté le 25-11-2004 à 17:10:53    

:o
 
Ce n'est pas ça le problème, c'est que dans mon initMenus() après, dans le premier cas il me dit "document.getElementById('ssMenu' + i) has no properties", et dans le second cas ça marche :heink:
 
 
Edit : ok j'ai trouvé sur un autre site : si on met les parenthèses il l'exécute direct, alors que si on n'en met pas, il attend la fin du chargement avant de l'exécuter...


Message édité par cosmoschtroumpf le 26-11-2004 à 11:04:35
Reply

Marsh Posté le 26-11-2004 à 09:51:38    

bien bien bien
 
nouveau problème.
 
j'ai utilisé l'article de pompage.net, et voilà donc mon nouveau code :
 
menu.php

<ul id="menus">
 <li><a href="menu1" id="menu1">accueil</a>
  <ul id="ssMenu1">
  </ul>
 </li>
 <li><a href="#" id="menu2">particuliers</a>
  <ul id="ssMenu2">
<?php
for ($i=0;$i<3;$i++) {
 echo '<li><a href="#">Sous-menu 1</a></li>';
}
?>
  </ul>
 </li>
 <li><a href="#" id="menu3">professionnels</a>
  <ul id="ssMenu3">
<?php
for ($i=0;$i<3;$i++) {
 echo '<li><a href="#">sous-menu 2</a></li>';
}
?>
  </ul>
 </li>
 <li><a href="#" id="menu4">produits</a>
  <ul id="ssMenu4">
<?php
for ($i=0;$i<3;$i++) {
 echo '<li><a href="#">sous-menu3</a></li>';
}
?>
  </ul>
 </li>
 <li><a href="#" id="menu5">contact</a>
  <ul id="ssMenu5">
  </ul>
 </li>
</ul>


 
menus.js

/* Définition des variables globales */
 
nbMenus = 5;
timer = null;
timerRunning = false;
var W3CDOM = (document.createElement && document.getElementsByTagName);
 
 
/*
 * INITMENUS
 * BUT : initialiser les menus en appliquant les styles
 */
function initMenus() {
 // si le navigateur ne gère pas createElement et getElementByTagName, on quitte la fonction
 if (!W3CDOM) return;
 /***************************************************
 *            Application des styles CSS            *
 ***************************************************/
 for (i=1;i<=nbMenus;i++) {
  with (document.getElementById('ssMenu' + i).style) {
   position = "absolute";
   top = "1.2em";
   width = "120px";
   padding = "0";
   margin = "0 0 0 2px";
   left = (i*124)-124 + "px";
   visibility = "hidden";
  }
 }
 
 /***************************************************
 *        Gestion de la dynamique des menus         *
 ***************************************************/
 for (i=1;i<=nbMenus;i++) {
  with(document.getElementById('menu' + i)) {
   // que je mette montrerMenu() entre guillemets
   // ou non, ça ne fait rien :
   onmouseover = "montrerMenu(i)";
   onmouseout = "timeoutMenu()";
  }
 }
}
 
/*
 * CACHERMENUS
 * BUT : cacher tous les menus
 */
function cacherMenus() {
 timerRunning = false;
 for(i=1;i<=nbMenus;i++) {
  document.getElementById('ssMenu' + i).style.visibility = "hidden";
 }
}
 
/*
 * MONTRERMENU
 * BUT : montrer un menu
 * E : int menuNb, le numéro du menu à montrer
 */
function montrerMenu(menuNb) {
 cacherMenus();
 document.getElementById('ssMenu' + menuNb).style.visibility = "visible";
}
 
/*
 * TIMEOUTMENU
 * BUT : lorsque la souris quitte le lien
 * principal, 3 secondes pour rentrer sur le
 * sous-menu ou le menu se cache
 */
function timeoutMenu() {
 timer = setTimeout("cacherMenus()",3000);
 timerRunning = true;
}
 
/*
 * KILLTIMEOUT
 * BUT : lorsque la souris passe sur le
 * sous-menu, arrêt du décompte avant masquage
 * de celui-ci
 */
 
function killTimeout() {
 if (timerRunning) {
  clearTimeout(timer);
 }
}
 
 
window.onload=initMenus;


 
Et comme je suis un mec bien lourd, je vous met même mon css :
 
basic.css

/****************************************
 * balises, classes générales
 ****************************************/
 
* {
 font-family: arial, helvetica, sans-serif;
 font-size: small;
}
 
body {
 background: #D9DFE1 url('../images/bandeau.jpg') no-repeat center top;
 text-align: center;
 margin: 0;
 width: 760px;
 margin-left: auto;
 margin-right: auto;
 padding-left: auto;
 padding-right: auto;
 padding-top: 100px;
}
 
a {
 color: #4F71D1;
 font-weight: bold;
 text-decoration: none;
}
a:hover {
 color: #0E1B89;
}
 
#footer {
 background-color: #000;
 color: #fff;
 font-size: 10px;
 margin: 0;
 padding: 0;
 width: 760px;
 border: 1px solid #000;
}
 
.accessibilite {
 display: none;
}
 
 
 
/****************************************
 * Textes
 ****************************************/
 
#contenu {
 text-align: left;
 clear: both;
 background-color: #fff;
 margin: 0;
 padding: 1em 0;
 width: 760px;
 border-left: 1px solid #000;
 border-right: 1px solid #000;
}
#contenu_haut, #contenu_bas {
 clear: both;
 margin: 1em;
}
#contenu_haut img {
 float: left;
 border: 1px solid #f00;
 margin: 1em;
}
#contenu_bas img {
 float: right;
 border: 1px solid #f00;
 margin: 1em;
}
 
 
/****************************************
 * Menus
 ****************************************/
 
#menus {
 position: relative;
 top: 0;
 background-color: #000;
 width: 760px;
 padding: 0;
 margin: 0;
}
#menus li {
 list-style-type: none;
 padding: 0;
 margin: 0;
 float: left;
 width: 125px;
}
#menus a {
 border-right: 1px solid #fff;
 width: 124px;
 background-color: #000;
 color: #fff;
 float: left;
}
#menus a:hover {
 color: #ccc;
}
 
a:hover#menu2 {
 color: #f00;
}
a:hover#menu3 {
 color: #0f0;
}
a:hover#menu4 {
 color: #66f;
}
 
/* MENUS SECONDAIRES */
 
#ssMenu2 li, #ssMenu3 li, #ssMenu4 li {
 list-style-type: none;
 text-align: left;
 background-color: #fff;
 padding: 0;
 margin: 0;
}
#ssMenu2 a, #ssMenu3 a, #ssMenu4 a {
 border: solid #000;
 border-width: 0 2px 1px 2px;
 font-weight: normal;
 color: #000;
 float:left;
 padding: 0 0 0 2px;
 background-color: #fff;
}
#ssMenu2 a:hover {
 border-color: #f00;
 border-bottom: 1px solid #000;
 background-color: #966;
 color: #fff;
}
#ssMenu3 a:hover {
 border-color: #0f0;
 border-bottom: 1px solid #000;
 background-color: #696;
 color: #fff;
}
#ssMenu4 a:hover {
 border-color: #00f;
 border-bottom: 1px solid #000;
 background-color: #669;
 color: #fff;
}
#ssMenu2 {
 left: 120px;
}
#ssMenu3 {
 left: 245px;
}
#ssMenu4 {
 left: 370px;
}


 
et voilà le résultat sous Firefox :
 
http://cosmo0.free.fr/divers/hopi-04.jpg
 
sous IE ca ne me fait pas le décalage entre les menus et le texte :??:  
et dans tous les cas, les menus ne s'affichent pas :/
 
 
si vous pouviez m'aider...
 
merci ! :)

Reply

Marsh Posté le 26-11-2004 à 16:29:03    

bon, ça ne s'arange pas.
Mes menus ne s'affichent toujours pas. Enfin, si, sous IE ils s'affichent, mais pas sous Firefox :pt1cable:  :sweat: . Du coup en fait ça s'arrange un peu.
 
mon nouveau code JS, qui s'est transformé en JS/PHP pour générer des fonctions... enfin, j'ai l'impression de me compliquer la vie pour rien...
 
menus.js.php

Code :
  1. /* Définition des variables globales */
  3. nbMenus = 5;
  4. <?php
  5. $nbMenus = 5;
  6. ?>
  8. timer = null;
  9. timerRunning = false;
  10. var W3CDOM = (document.createElement && document.getElementsByTagName);
  13. /*
  14. * INITMENUS
  15. * BUT : initialiser les menus en appliquant les styles
  16. */
  17. function initMenus() {
  18. // si le navigateur ne gère pas createElement et getElementsByTagName, on quitte la fonction
  19. if (!W3CDOM) return;
  20. /***************************************************
  21. *            Application des styles CSS            *
  22. ***************************************************/
  23. for (i=1;i<=nbMenus;i++) {
  24.  with (document.getElementById('ssMenu' + i).style) {
  25.   width = "120px";
  26.   padding = "0";
  27.   margin = "0 0 0 2px";
  28.   left = (i*124)-124 + "px";
  29.  }
  30. }
  32. /***************************************************
  33. *        Gestion de la dynamique des menus         *
  34. ***************************************************/
  35. document.getElementsByTagName("body" ).onclick = cacherMenus;
  36. <?php
  37. for ($i=1;$i<=$nbMenus;$i++) {
  38. printf('
  39. with(document.getElementById("menu' . $i . '" )) {
  40.  onmouseover = montrerMenu' . $i . ';
  41.  onmouseout = timeoutMenu;
  42.  onclick = cacherMenus;
  43. }
  44. with(document.getElementById("ssMenu' . $i . '" )) {
  45.  onmouseover = killTimeout;
  46.  onclick = cacherMenus;
  47.  onmouseout = timeoutMenu;
  48. }
  49. ');
  50. }
  51. ?>
  52. cacherMenus();
  53. }
  55. /*
  56. * CACHERMENUS
  57. * BUT : cacher tous les menus
  58. */
  59. function cacherMenus() {
  60. timerRunning = false;
  61. for(i=1;i<=nbMenus;i++) {
  62.  document.getElementById('ssMenu' + i).style.visibility = "hidden";
  63. }
  64. }
  66. /*
  67. * MONTRERMENU
  68. * BUT : montrer un menu
  69. * COM : généré en Php, parce qu'en JS seul c'est pas possible
  70. */
  71. <?php
  72. for ($i=1;$i<=$nbMenus;$i++) {
  73. printf("
  74. function montrerMenu" . $i . "() {\n
  75.  cacherMenus();
  76.  document.getElementById('ssMenu" . $i . "').style.visibility = 'visible';
  77. }" );
  78. }
  79. ?>
  81. /*
  82. * TIMEOUTMENU
  83. * BUT : lorsque la souris quitte le lien principal, 3 secondes pour rentrer sur le sous-menu ou le menu se cache
  84. */
  85. function timeoutMenu() {
  86. timer = setTimeout("cacherMenus()",3000);
  87. timerRunning = true;
  88. }
  90. /*
  91. * KILLTIMEOUT
  92. * BUT : lorsque la souris passe sur le sous-menu, arrêt du décompte avant masquage de celui-ci
  93. */
  95. function killTimeout() {
  96. if (timerRunning) {
  97.  clearTimeout(timer);
  98. }
  99. }
  102. window.onload=initMenus;


 
 
pourquoi ça marche sous IE mais pas sous mozilla ? :??:

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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