Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1507 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML/JS] Chargement + menu x niveaux JS

 


 Mot :   Pseudo :  
 
 Page :   1  2
Page Précédente
Auteur Sujet :

[HTML/JS] Chargement + menu x niveaux JS

n°580400
urd-sama
waste of space
Posté le 01-12-2003 à 14:02:54  profilanswer
 

Bonjour :hello:
j'ai un problème très étrange qui ne peut pas être considéré comme un bug: oui, je n'arrive pas à reproduire l'erreur :/
c'est pour cela que je cherche des idées pour le déceler.  
 
Voici le cas. Je possède une page composée de 3 frames. La première ne possède rien de spécial, la deuxième est un menu en javascript (truc simple) et la troisième possède un include en asp.
 
Environ 1 fois sur 3, lorsque je clique sur mon menu, la page se charge (recharge le menu + un onclick sur la frame principale) puis semble continuer à se charger.  
exemple du bas de la fenêtre:
http://www.mangaclub.ch/urd/imagecenter/Perso/86.gif
 
Comme je l'ai dis, mon grand problème c'est que je ne peux pas reproduire la chose. Elle n'est pas indépendant à un lien, ni à une page, ni rien. Cela se produit totalement aléatoirement.
 
Si qqun a une idée, qu'il n'hésite pas, je sais vraiment pas ou chercher. Si jamais je suis sous ie et je ne peux pas tester sous un autre browser (intranet pas cool).
 
Merci d'avance [:zytra]


Message édité par urd-sama le 12-12-2003 à 10:08:56
mood
Publicité
Posté le 01-12-2003 à 14:02:54  profilanswer
 

n°580640
urd-sama
waste of space
Posté le 01-12-2003 à 16:35:45  profilanswer
 

nobooooody knoooows, the troubles i've seen...
(up déguisé [:dawa])

n°580677
gizmo
Posté le 01-12-2003 à 16:49:40  profilanswer
 

nobody knows but jesuuus.... [:dawa]

n°580733
Mara's dad
Yes I can !
Posté le 01-12-2003 à 17:17:14  profilanswer
 

Montres les sources des 3 frames et de la page de description des frames, ou une URL, qu'on puisse tenter de comprendre quelque-chose.
 
Idée, est-ce que tu as des <button onclick="..."> quelque part dans un formulaire ?


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°580798
urd-sama
waste of space
Posté le 01-12-2003 à 18:20:59  profilanswer
 

je vous donne tout ca demain  
d'après mes souvenirs y'a pas d'événement onclick sur un bouton, par contre sur des liens oui


---------------
.: Clône de Drasche .:. Ebichuleys .:. Avec l'Aloe Vera je fais de beaux cacas [:dawa] .: www.oserselancer.com :.
n°580839
schnapsman​n
Zaford Beeblefect
Posté le 01-12-2003 à 19:48:21  profilanswer
 

pour aider, je dirais qu'il faut renommer le titre comme ça:
 
[IE/HTML] ...
 
(Attention indice caché: t'as essayé avec moz, juste pour t'en persuader?)


Message édité par schnapsmann le 01-12-2003 à 19:49:16

---------------
From now on, you will speak only when spoken to, and the first and last words out of your filthy sewers will be "Sir!"
n°580861
urd-sama
waste of space
Posté le 01-12-2003 à 20:19:36  profilanswer
 

a peu pas tester avec un autre browser
c'est bloqué


---------------
.: Clône de Drasche .:. Ebichuleys .:. Avec l'Aloe Vera je fais de beaux cacas [:dawa] .: www.oserselancer.com :.
n°580865
schnapsman​n
Zaford Beeblefect
Posté le 01-12-2003 à 20:21:05  profilanswer
 

Urd-sama a écrit :

a peu pas tester avec un autre browser
c'est bloqué


 
t'as essayé de rajouter des sauts de lignes bidon un peu partout dans ta page (surtout en fin). N'oublie pas, c'est ie.


---------------
From now on, you will speak only when spoken to, and the first and last words out of your filthy sewers will be "Sir!"
n°581188
Mara's dad
Yes I can !
Posté le 02-12-2003 à 09:54:08  profilanswer
 

Alors...


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°581189
urd-sama
waste of space
Posté le 02-12-2003 à 09:55:05  profilanswer
 

alors je viens de tester l'ajout de saut de ligne bidon et le problème est toujours là malheureusement.
ensuite voici les codes des 3 pages, je vais les alléger au mieux:
vue d'ensemble: http://www.mangaclub.ch/urd/imagecenter/Perso/82.png
(ne vous fier pas aux flèches, c'était pour une autre problème)
 
code frame 1:

Code :
  1. <body>
  2. <div style="left:0px; top:0px;">
  3. <!--form ACTION="/Search/d/query.idq" METHOD="get" target="_top"-->
  4. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  5. <input name="CiMaxRecordsPerPage" type="hidden" value="10" />
  6. <!--webbot bot="HTMLMarkup" endspan i-checksum="4725" -->
  7. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  8. <input name="TemplateName" type="hidden" value="query" />
  9. <!--webbot bot="HTMLMarkup" endspan i-checksum="3271" -->
  10. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  11. <input name="CiSort" type="hidden" value="rank[d]" />
  12. <!--webbot bot="HTMLMarkup" endspan i-checksum="16531" -->
  13. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  14. <input name="HTMLQueryForm" type="hidden" value="/Search/d/query.htm" />
  15. <!--webbot bot="HTMLMarkup" endspan i-checksum="3739" -->
  16. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  17. <input name="CiScope" type="hidden" value="/oe/" />
  18. <!--webbot bot="HTMLMarkup" endspan i-checksum="3370" -->
  19. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  20. <input name="CiMeta" type="hidden" value="ALL" />
  21. <!--webbot bot="HTMLMarkup" endspan i-checksum="62908" -->
  22. <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
  23. <input name="CiSuche" type="hidden" value="CiRestriction" />
  24. <!--webbot bot="HTMLMarkup" endspan i-checksum="44664" -->
  25. <table cellspacing="0" style="border:0px; width:701px; height:71px;">
  26.   <tr>
  27.     <td style="width:15px; height:42px;"></td>
  28.     <td style="width:200px; height:42px;"><img border="0" src="http://pww.xxx.ch/images/xxx.gif" alt="Intranet xxx" /></td>
  29.     <td style="width:19px; height:42px;"></td>
  30.     <td colspan="6" style="width:571px; height:42px;"><h1>xxx</h1></td>
  31.   </tr>
  32.   <tr>
  33.     <td class="BorderTop" style="width:15px; height:25px;">&nbsp;</td>
  34.     <td class="BorderTop" style="width:212px; height:25px;"><a href="http://pww.xxx.ch/index.htm" target="_top">Home Intranet</a></td>
  35.     <td style="width:19px; height:25px;"></td>
  36.     <td style="width:159px; height:25px;"></td>
  37.     <td class="BorderLeft" style="width:60px; height:25px;"><%IF Session("langue" )="deutsch" THEN%><span class="langueActive"><%ELSE%><!--<a href="index.asp" target="_top">--><%END IF%><span style="color:#808080;">Deutsch</span></a></span></td>
  38.     <td class="BorderLeft" style="width:60px; height:25px;"><%IF Session("langue" )="francais" THEN%><span class="langueActive"><%ELSE%><!--<a href="2index.asp" target="_top">--><%END IF%><span style="color:#808080;">Français</span></a></span></td>
  39.     <td class="BorderLeft" style="width:60px; height:25px;"><%IF Session("langue" )="italiano" THEN%><span class="langueActive"><%ELSE%><!--<a href="3index.asp" target="_top">--><%END IF%><span style="color:#808080;">Italiano</span></a></span></td>
  40.     <td class="BorderLeft" style="width:60px; height:25px;"><%IF Session("langue" )="english" THEN%><span class="langueActive"><%ELSE%><a href="4index.asp" target="_top"><%END IF%>English</a></span></td>
  41.     <td class="BorderLeft" style="width:52px; height:25px;"><a href="4left.htm?070200" target="left" onClick="parent.right.location='support/feedback/feedback.asp'">Cont@ct</a></td>
  42.   </tr>
  43. </table>
  44. <!--/form-->
  45. </div>
  46. </body>


le code n'est pas entièrement de moi mais je peux pas le modifier
 
frame2:

Code :
  1. <body>
  2. <script language="javascript" type="text/javascript">
  3. <!--
  4. var vActif = "null";
  5.   vActif = location.search.substring(1, location.search.length-4);
  6.   vActif2 = location.search.substring(3, location.search.length-2);
  7.   vActif3 = location.search.substring(5, location.search.length);
  8.   if (vActif=="null" ) vActif=00;
  9.   if (vActif2=="null" ) vActif2=00;
  10.   if (vActif3=="null" ) vActif3=00;
  11. -->
  12. </script>
  13. <!-- Menu Home xxx-->
  14. <script language="javascript" type="text/javascript">
  15. <!--
  16. if (vActif==00) {document.write ("<a href=\"4right.asp\" target=\"right\" onClick=\"parent.left.location='4left.htm?000000'\" class=\"menuLeft , menuLeftSelected\">Home RUP@IT1</a>" );}
  17. else {document.write ("<a href=\"4right.asp\" target=\"right\" onClick=\"parent.left.location='4left.htm?000000'\" class=\"menuLeft\">Home RUP@IT1</a>" );}
  18. -->
  19. </script>
  20. <!-- Menu Definition -->
  21. <script language="javascript" type="text/javascript">
  22. <!--
  23. if (vActif==01) /*Si le menu est sélectionné, on ouvre les sous-menus inhérents; sinon affichage normal sans les sous-menus*/
  24. {
  25.   /* Si le menu est sélectionné, on utilise un background blanc; autrement gris */
  26.   if (vActif2==00) {document.write ("<a href=\"definition/definition.asp\" target=\"right\" onClick=\"parent.left.location='4left.htm?010000'\" class=\"menuLeft , menuLeftSelected\">Definition</a>" );}
  27.   else {document.write ("<a href=\"definition/definition.asp\" target=\"right\" onClick=\"parent.left.location='4left.htm?010000'\" class=\"menuLeft\">Definition</a>" );}
  28. [...]
  29. </script>
  30. <div class="ligneHaut"> &nbsp; </div>
  31. <br /><br /><br />
  32. </body>


 
je mets pas de code de la frame3 vu que le problème ne vient pas de la


Message édité par urd-sama le 02-12-2003 à 09:57:21
mood
Publicité
Posté le 02-12-2003 à 09:55:05  profilanswer
 

n°581190
walli
Posté le 02-12-2003 à 09:56:35  profilanswer
 

[:cupra]
tu pourrais pas utiliser les balises [cpp][/cpp] ?

n°581192
urd-sama
waste of space
Posté le 02-12-2003 à 09:57:00  profilanswer
 

c'est une idée :D
edit: corriged


Message édité par urd-sama le 02-12-2003 à 09:57:44
n°581204
Mara's dad
Yes I can !
Posté le 02-12-2003 à 10:12:51  profilanswer
 

Bon, désolé, mais j'ai rarement vu un menu aussi capilotracté.
 
Si je comprend bien :
<a href="definition/definition.asp" target="right" onClick="parent.left.location='4left.htm?010000'"
Je me dis que tu recharge la page de menu pour lui passer un paramètre qui sert a activer un sous-menu.
 
Ne serait-il pas plus simple d'appeler une fonction qui cache les sous-menus et qui montre celui que tu veux ?
 
Tu veux un exemple ?


Message édité par Mara's dad le 02-12-2003 à 10:13:21

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°581209
urd-sama
waste of space
Posté le 02-12-2003 à 10:16:50  profilanswer
 

je sais que c'est un code tout moisi mais j'y connaissais que dalle en jscript :(
je veux bien voir par contre oui, mais je pense pas que j'aurai le temps de changer (présentation jeudi)
mais pour après  ca peut être intéressant :)

n°581215
Mara's dad
Yes I can !
Posté le 02-12-2003 à 10:26:06  profilanswer
 

Il est tout simple :
 
menu.html

Code :
  1. <HTML>
  2. <HEAD>
  3. <link href="menu.css" type="text/css" rel="styleSheet">
  4. <script language="javascript1.1">
  5. var activFonc = 0;
  6. function selFonc( x )
  7. {
  8. if( x != activFonc )
  9. {
  10.  if( activFonc != 0 )
  11.  {
  12.   document.getElementById( 'sous_menu_' + activFonc ).style.display = "none" ;
  13.  }
  14.  document.getElementById( 'sous_menu_' + x ).style.display = "block" ;
  15.  activFonc = x;
  16. }
  17. }
  18. </script>
  19. </head>
  20. <BODY>
  21. <DIV CLASS="menudyn">
  22. <a class="fonc" id="fonc_1" href="page.php?id_page=1_0" target="page" onClick="selFonc(1);">Menu-1</a>
  23. <DIV id="sous_menu_1" class="sous_menu">
  24.  <a class="sous_fonc" href="page.php?id_page=1_1" target="page">Normes</a>
  25.  <a class="sous_fonc" href="page.php?id_page=1_2" target="page">Fonctionnement</a>
  26.  <a class="sous_fonc" href="page.php?id_page=1_3" target="page">Exemples</a>
  27. </DIV>
  28. <a class="fonc" id="fonc_2" href="page.php?id_page=2_0" target="page" onClick="selFonc(2);">Menu-2</a>
  29. <DIV id="sous_menu_2" class="sous_menu">
  30.  <a class="sous_fonc" href="page.php?id_page=2_1" target="page">Produits</a>
  31.  <a class="sous_fonc" href="page.php?id_page=2_2" target="page">Tarifs</a>
  32. </DIV>
  33. </DIV>
  34. </BODY>
  35. </HTML>


 
menu.css

Code :
  1. div.menudyn
  2. {
  3. padding: 0px;
  4. padding-top: 4;
  5. padding-bottom: 4;
  6. }
  7. .fonc
  8. {
  9. display: block;
  10. position:relative;
  11. margin:2;
  12. padding:2;
  13. text-decoration: none;
  14. }
  15. .fonc:hover
  16. {
  17. color: #e0e0e0;
  18. background-color: #2D598A;
  19. }
  20. .sous_fonc
  21. {
  22. display: block;
  23. margin:2;
  24. padding:2;
  25. text-decoration: none;
  26. }
  27. .sous_fonc:hover
  28. {
  29. color: #e0e0e0;
  30. background-color: #2D598A;
  31. }
  32. .sous_menu
  33. {
  34. z-index:2;
  35. display: none;
  36. position: relative;
  37. margin:0;
  38. padding:0;
  39. left:20;
  40. }


 
Dans le css, ce qui est important, c'est display: none dans sous_menu.
 
Edit : Corrigé une incohérence dans les targets.


Message édité par Mara's dad le 02-12-2003 à 10:36:32

---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°581219
urd-sama
waste of space
Posté le 02-12-2003 à 10:32:41  profilanswer
 

merci dad, je tenterai ca à l'occaz, je vais d'abord terminer ce qui est en cours :)

n°581224
Mara's dad
Yes I can !
Posté le 02-12-2003 à 10:39:39  profilanswer
 

Avantages de ce menu
Il est facile à générer dynamiquement.
Il n'y a presque rien en javascript.
La frame de menu ne se recharge pas à chaque sélection.
...


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°581225
urd-sama
waste of space
Posté le 02-12-2003 à 10:40:53  profilanswer
 

ouais clair c'est beaucoup mieux que mon actuel (j'ai assez honte de l'actuel je dois avouer mais bon).
je m'y pencherai pour la prochaine session :)

n°581293
jagstang
Pa Capona ಠ_ಠ
Posté le 02-12-2003 à 11:50:52  profilanswer
 

Est-ce que ça pourrait être un problème de Response.End() / Response.Flush() ou qqch du style ?

n°581331
urd-sama
waste of space
Posté le 02-12-2003 à 12:27:39  profilanswer
 

il n'y en a pas (pas 100% sure cependant)

n°581566
jagstang
Pa Capona ಠ_ಠ
Posté le 02-12-2003 à 15:52:01  profilanswer
 

justement. essaye d'en mettre..

n°581567
urd-sama
waste of space
Posté le 02-12-2003 à 15:53:01  profilanswer
 

ah lol ok je vais tester demain merci :)

n°581573
jagstang
Pa Capona ಠ_ಠ
Posté le 02-12-2003 à 15:56:55  profilanswer
 

Sans garanties toutefois :)

n°582264
urd-sama
waste of space
Posté le 03-12-2003 à 13:24:08  profilanswer
 

apparemment aucune amélioration

n°582335
jagstang
Pa Capona ಠ_ಠ
Posté le 03-12-2003 à 14:51:50  profilanswer
 

sniffe la carte réseau alors

n°582360
Mara's dad
Yes I can !
Posté le 03-12-2003 à 15:16:19  profilanswer
 

Cette image : src="http://pww.xxx.ch/images/xxx.gif" alt="Intranet xxx" />
Elle est toujours disponible ou pas ?
 
Dans ta frame de droite, il semble qu'il y ait des éléments externes. Peut-être certains d'entre-eux sont-il long à arriver. Un peu comme la fleur ICQ sur le forum...


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°585312
urd-sama
waste of space
Posté le 08-12-2003 à 10:09:35  profilanswer
 

je suis en train de voir ton menu en javascript, et j'ai un petite question, je ne comprends pas bien le role de cette variable:
var activFonc = 0;
peux-tu m'éclairer?

n°585344
Mara's dad
Yes I can !
Posté le 08-12-2003 à 10:47:13  profilanswer
 

C'est une variable globale au script.
Elle contient le numéro du menu dont le sous-menu est ouvert.
 
Au chargement, aucun menu n'est ouvert donc 0.
 
Ensuite quand on clic sur un menu, on regarde cette variable :
 
 
Si activFonc == menu demandé -> rien ( return )
Si activFonc =! 0 -> Fermer menu activFonc
Enfin, ouvrir le menu demandé et enregistrer son numéro dans activFonc.


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°585347
urd-sama
waste of space
Posté le 08-12-2003 à 10:51:53  profilanswer
 

d'accord merci daddy :jap:
je suis en train de regarder pour faire à 3 niveaux, spa simple toussa [:dawa]

n°585379
Mara's dad
Yes I can !
Posté le 08-12-2003 à 11:03:03  profilanswer
 

3 Niveaux !
Et demain 4, c'est çà ?
Donc N en fait...
Heu, je regarde aussi, pour le fun :D


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°585381
urd-sama
waste of space
Posté le 08-12-2003 à 11:04:21  profilanswer
 

normalement ca devrait rester à 3 (je fais en sorte que ca dépasse pas). mais pour le fun faudrait faire pour N niveaux ouais ;)
c'est là que je remarque que je maitrise pas du tout le javascript :/

n°585479
Mara's dad
Yes I can !
Posté le 08-12-2003 à 12:05:02  profilanswer
 

Je l'ai !
 
menu.html ( à générer bien sûr ! )

Code :
  1. <HTML>
  2. <HEAD>
  3. <link href="menu.css" type="text/css" rel="styleSheet">
  4. <script>
  5. // Nombre de niveaux max
  6. var nbMaxLevel = 4;
  7. // Niveau actuel
  8. var levelNum = 0;
  9. // Tableau des menus activés
  10. var activMenu = new Array( nbMaxLevel );
  11. // Initialisation du tableau
  12. for( i = 0; i < nbMaxLevel; i++ )
  13. {
  14. activMenu[ i ] = 0;
  15. }
  16. // Fonction de gestion des menus
  17. function sel_Menu( menuNum, menuLevel )
  18. {
  19. // Si le menu demandé est déjà actif, on ne fait rien
  20. // On plutôt, on fait quelque-chose seulement si le menu demandé n'est pas actif
  21. if( activMenu[ menuLevel ] != menuNum )
  22. {
  23.  // On ferme les menus de même niveau et plus profond
  24.  for( i = nbMaxLevel - 1 ; i >= menuLevel; i-- )
  25.  {
  26.   // Si le menu du niveau i est actif.
  27.   if( activMenu[ i ] != 0 )
  28.   {
  29.    document.getElementById( 'menu_' + activMenu[ i ] ).style.display = "none" ;
  30.   }
  31.  }
  32.  // On ouvre le menu demandé
  33.  document.getElementById( 'menu_' + menuNum ).style.display = "block" ;
  34.  // On mémorise le menu ouvert dans ce niveau
  35.  activMenu[ menuLevel ] = menuNum;
  36. }
  37. }
  38. </script>
  39. </head>
  40. <body>
  41. <DIV CLASS="menudyn">
  42. <a class="fonc" href="page.php?id_page=1_0" target="right" onClick="sel_Menu( '1', 0 );">Menu-1</a>
  43. <DIV id="menu_1" class="sous_menu">
  44.  <a class="sous_fonc" href="page.php?id_page=1_1" target="right" onClick="sel_Menu( '1_1', 1 );">Menu-1-1</a>
  45.  <DIV id="menu_1_1" class="sous_menu">
  46.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_1', 2 );">Menu-1-1-1</a>
  47.   <DIV id="menu_1_1_1" class="sous_menu">
  48.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  49.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  50.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  51.   </DIV>
  52.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2', 2 );">Menu-1-1-2</a>
  53.   <DIV id="menu_1_1_2" class="sous_menu">
  54.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  55.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  56.    <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2_1', 3 );">Menu-1-1-2-1</a>
  57.    <DIV id="menu_1_1_2_1" class="sous_menu">
  58.     <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  59.     <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  60.     <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  61.    </DIV>
  62.    <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2_2', 3 );">Menu-1-1-2-2</a>
  63.    <DIV id="menu_1_1_2_2" class="sous_menu">
  64.     <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  65.     <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  66.     <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  67.    </DIV>
  68.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  69.   </DIV>
  70.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_3', 2 );">Menu-1-1-3</a>
  71.   <DIV id="menu_1_1_3" class="sous_menu">
  72.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right">Norme</a>
  73.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right">Exemples</a>
  74.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  75.   </DIV>
  76.   <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right">Fonctionnement</a>
  77.  </DIV>
  78.  <a class="sous_fonc" href="page.php?id_page=1_2" target="right">Fonctionnement</a>
  79.  <a class="sous_fonc" href="page.php?id_page=1_2" target="right" onClick="sel_Menu( '1_2', 1 );">Menu-1-2</a>
  80.  <DIV id="menu_1_2" class="sous_menu">
  81.   <a class="sous_fonc" href="page.php?id_page=1_2_1" target="right">Normes</a>
  82.   <a class="sous_fonc" href="page.php?id_page=1_2_2" target="right">Fonctionnement</a>
  83.   <a class="sous_fonc" href="page.php?id_page=1_2_3" target="right">Exemples</a>
  84.  </DIV>
  85.  <a class="sous_fonc" href="page.php?id_page=1_3" target="right">Exemples</a>
  86. </DIV>
  87. <a class="fonc" href="page.php?id_page=2_0" target="right" onClick="sel_Menu( '2', 0 );">Menu-2</a>
  88. <DIV id="menu_2" class="sous_menu">
  89.  <a class="sous_fonc" href="page.php?id_page=2_1" target="right">Produits</a>
  90.  <a class="sous_fonc" href="page.php?id_page=2_2" target="right">Tarifs</a>
  91.  <a class="sous_fonc" href="page.php?id_page=2_1" target="right" onClick="sel_Menu( '2_1', 1 );">Menu-2-1</a>
  92.  <DIV id="menu_2_1" class="sous_menu">
  93.   <a class="sous_fonc" href="page.php?id_page=1_2_1" target="right">Normes</a>
  94.   <a class="sous_fonc" href="page.php?id_page=1_2_2" target="right">Fonctionnement</a>
  95.   <a class="sous_fonc" href="page.php?id_page=1_2_3" target="right">Exemples</a>
  96.  </DIV>
  97. </DIV>
  98. </DIV>
  99. </body>
  100. </html>


 
menu.css ( C'est le même, sauf que j'ai mis un width dans fonc et sous-fonc ):  

Code :
  1. div.menudyn
  2. {
  3. padding: 0px;
  4. padding-top: 4;
  5. padding-bottom: 4;
  6. }
  7. .fonc
  8. {
  9. display: block;
  10. position:relative;
  11. margin:2;
  12. padding:2;
  13. width:200px;
  14. text-decoration: none;
  15. }
  16. .fonc:hover
  17. {
  18. color: #e0e0e0;
  19. background-color: #2D598A;
  20. }
  21. .sous_fonc
  22. {
  23. display: block;
  24. margin:2;
  25. padding:2;
  26. width:200px;
  27. text-decoration: none;
  28. }
  29. .sous_fonc:hover
  30. {
  31. color: #e0e0e0;
  32. background-color: #2D598A;
  33. }
  34. .sous_menu
  35. {
  36. z-index:2;
  37. display: none;
  38. position: relative;
  39. margin:0;
  40. padding:0;
  41. left:20;
  42. }


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°585485
urd-sama
waste of space
Posté le 08-12-2003 à 12:08:58  profilanswer
 

t'es trop fort [:dawa]
je regarde ca cet aprèm, je galère avec une croute de pc pour le moment

n°585493
Mara's dad
Yes I can !
Posté le 08-12-2003 à 12:16:41  profilanswer
 

J'ai vu :D


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°585582
urd-sama
waste of space
Posté le 08-12-2003 à 13:58:59  profilanswer
 

voilà j'ai fais ma propre css:

Code :
  1. body {
  2. background-color: #CCCCCC;
  3. }
  4. div.menudyn  {
  5. width: 165px;
  6. display: block;
  7. }
  8. .fonc  {
  9. display: block;
  10. }
  11.  
  12. .fonc:hover  {
  13. background-color: white;
  14. }
  15.  
  16. .sous_fonc  {
  17. display: block;
  18. }
  19.  
  20. .sous_fonc:hover  {
  21. background-color: white; 
  22. }
  23. .sous_menu  {
  24. display: none;
  25. padding-left: 10px;
  26. }
  27. a {
  28. border-top: 1px white solid;
  29. text-decoration: none;
  30. color: black;
  31. font-size: smaller;
  32. }


2 questions:
- j'aimerais que les bordures prennent toute la largeur, est-ce possible? (essayé plusieurs trucs sans succès)
- est-ce possible de faire en sorte que lorsque le pointeur est sur la ligne du menu, ca soit sélectionné (état de mon ancien menu). tandis que maintenant il faut être sur le texte. je crois que c'est la propriété display:block qui permet ceci me trompe-je?
sinon ca marche nickel, t'es trop fort [:darkmavis]

n°585627
Mara's dad
Yes I can !
Posté le 08-12-2003 à 14:37:47  profilanswer
 

1- Toute la largeur à gauche c'est çà ? Heu, je sais pas, je fait des tests...
2- Sous Moz çà marche, mais sous IE, il faut ajouter width=100%; dans a{...}


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°585630
urd-sama
waste of space
Posté le 08-12-2003 à 14:46:34  profilanswer
 

yes le deuxième problème est réglé!
j'aimerais effectivement que ma ligne aille jusqu'au bord gauche. j'ai essayé padding, margin, left... mais aucun ne semble être d'accord
 
le code corrigé et incriminé:

Code :
  1. ...
  2. .sous_menu  {
  3. display: none;
  4. padding-left: 10px; /*problème*/
  5. }
  6. a {
  7. border-top: 1px white solid;
  8. text-decoration: none;
  9. color: black;
  10. font-size: smaller;
  11. width: 100%;
  12. }


Message édité par urd-sama le 08-12-2003 à 14:47:48
n°585634
Mara's dad
Yes I can !
Posté le 08-12-2003 à 14:59:32  profilanswer
 

1- Heu pour le moment la seule solution que je vois c'est d'enlever padding-left: 10px; de .sous_menu{...} et de générer des <span style="margin-left:0px;"></span> pour le texte des liens avec une valeur en fonction du niveau de profondeur du menu :

Code :
  1. <DIV CLASS="menudyn">
  2. <a class="fonc" href="page.php?id_page=1_0" target="right" onClick="sel_Menu( '1', 0 );"><span style="margin-left:0px;">Menu-1</span></a>
  3. <DIV id="menu_1" class="sous_menu">
  4.  <a class="sous_fonc" href="page.php?id_page=1_1" target="right" onClick="sel_Menu( '1_1', 1 );"><span style="margin-left:10px;">Menu-1-1</span></a>
  5.  <DIV id="menu_1_1" class="sous_menu">
  6.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_1', 2 );"><span style="margin-left:20px;">Menu-1-1-1</span></a>
  7.   <DIV id="menu_1_1_1" class="sous_menu">
  8.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:30px;">Norme</span></a>       
  9.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:30px;">Exemples</span></a>     
  10.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:30px;">Fonctionnement</span></a>
  11.   </DIV>
  12.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2', 2 );"><span style="margin-left:20px;">Menu-1-1-2</span></a>
  13.   <DIV id="menu_1_1_2" class="sous_menu">
  14.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:30px;">Norme</span></a>
  15.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:30px;">Exemples</span></a>
  16.    <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2_1', 3 );"><span style="margin-left:30px;">Menu-1-1-2-1</span></a>
  17.    <DIV id="menu_1_1_2_1" class="sous_menu">
  18.     <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:40px;">Norme</span></a>
  19.     <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:40px;">Exemples</span></a>
  20.     <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:40px;">Fonctionnement</span></a>
  21.    </DIV>
  22.    <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_2_2', 3 );"><span style="margin-left:30px;">Menu-1-1-2-2</span></a>
  23.    <DIV id="menu_1_1_2_2" class="sous_menu">
  24.     <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:40px;">Norme</span></a>
  25.     <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:40px;">Exemples</span></a>
  26.     <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:40px;">Fonctionnement</span></a>
  27.    </DIV>
  28.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:30px;">Fonctionnement</span></a>
  29.   </DIV>
  30.   <a class="sous_fonc" href="page.php?id_page=1_7" target="right" onClick="sel_Menu( '1_1_3', 2 );"><span style="margin-left:20px;">Menu-1-1-3</span></a>
  31.   <DIV id="menu_1_1_3" class="sous_menu">
  32.    <a class="sous_fonc" href="page.php?id_page=1_1_1" target="right"><span style="margin-left:30px;">Norme</span></a>
  33.    <a class="sous_fonc" href="page.php?id_page=1_1_3" target="right"><span style="margin-left:30px;">Exemples</span></a>
  34.    <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:30px;">Fonctionnement</span></a>
  35.   </DIV>
  36.   <a class="sous_fonc" href="page.php?id_page=1_1_2" target="right"><span style="margin-left:20px;">Fonctionnement</span></a>
  37.  </DIV>
  38.  <a class="sous_fonc" href="page.php?id_page=1_2" target="right"><span style="margin-left:10px;">Fonctionnement</span></a>
  39.  <a class="sous_fonc" href="page.php?id_page=1_2" target="right" onClick="sel_Menu( '1_2', 1 );"><span style="margin-left:10px;">Menu-1-2</span></a>
  40.  <DIV id="menu_1_2" class="sous_menu">
  41.   <a class="sous_fonc" href="page.php?id_page=1_2_1" target="right"><span style="margin-left:20px;">Normes</span></a>
  42.   <a class="sous_fonc" href="page.php?id_page=1_2_2" target="right"><span style="margin-left:20px;">Fonctionnement</span></a>
  43.   <a class="sous_fonc" href="page.php?id_page=1_2_3" target="right"><span style="margin-left:20px;">Exemples</span></a>
  44.  </DIV>
  45.  <a class="sous_fonc" href="page.php?id_page=1_3" target="right"><span style="margin-left:10px;">Exemples</span></a>
  46. </DIV>
  47. <a class="fonc" href="page.php?id_page=2_0" target="right" onClick="sel_Menu( '2', 0 );"><span style="margin-left:0px;">Menu-2</span></a>
  48. <DIV id="menu_2" class="sous_menu">
  49.  <a class="sous_fonc" href="page.php?id_page=2_1" target="right"><span style="margin-left:10px;">Produits</span></a>
  50.  <a class="sous_fonc" href="page.php?id_page=2_2" target="right"><span style="margin-left:10px;">Tarifs</span></a>
  51.  <a class="sous_fonc" href="page.php?id_page=2_1" target="right" onClick="sel_Menu( '2_1', 1 );"><span style="margin-left:10px;">Menu-2-1</span></a>
  52.  <DIV id="menu_2_1" class="sous_menu">
  53.   <a class="sous_fonc" href="page.php?id_page=1_2_1" target="right"><span style="margin-left:20px;">Normes</span></a>
  54.   <a class="sous_fonc" href="page.php?id_page=1_2_2" target="right"><span style="margin-left:20px;">Fonctionnement</span></a>
  55.   <a class="sous_fonc" href="page.php?id_page=1_2_3" target="right"><span style="margin-left:20px;">Exemples</span></a>
  56.  </DIV>
  57. </DIV>
  58. </DIV>


 


---------------
Laissez l'Etat dans les toilettes où vous l'avez trouvé.
n°585638
urd-sama
waste of space
Posté le 08-12-2003 à 15:03:52  profilanswer
 

c'est ce que je pensais aussi ;)
pour le moment j'y vais comme ca, de toute facon je dois construire le menu de toute pièce alors c'est pas un problème.
un énorme merci à toi pour toute ton aide, tu m'as fait gagner beaucoup de temps!
maintenant je dois traduire une centaines de pages en 3 langues, vive la suisse!

n°585648
urd-sama
waste of space
Posté le 08-12-2003 à 15:13:59  profilanswer
 

ah, par contre y'a un petit problème:
http://www.mangaclub.ch/urd/imagecenter/Perso/88.gif
quand le texte va à la ligne

mood
Publicité
Posté le   profilanswer
 

 Page :   1  2
Page Précédente

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [HTML/JS] Chargement + menu x niveaux JS

 

Sujets relatifs
[HTML / CSS] problèmes avec SPAN videRécuperer du HTML avec VBS ...
Convertir des caractères en code HTML correspondantun site en PHP/MySQL avec seulement des pages HTML en cache !?!?
Transformation XML/XSL -> HTML dans un web-browser (pas forcement IE)[ html ] donner de la couleur à "title"
[HTML] Thead(HTML/JS aussi)Recuperation de valeur contenu entre les TAG
[HTML] Insertion de caractères spéciaux ![XHTML] Problème de padding pour un menu dans une frame [IE bug!]
Plus de sujets relatifs à : [HTML/JS] Chargement + menu x niveaux JS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR