Discussion :

[gids01]

Bonjour,

J'ai réaliser un menu en javascript, mais il ne s'affiche pas comme je le souhaite.

Si je le met seul dans un page, il s'affiche correctement, par contre si je le mets une balise <div> appartenant à ma page, il ne s'affiche plus correctement.

Voici le code du menu:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
var blnOk=true;
 
function Chargement() {
 
 
  CacherMenus();
 
  if(document.body.style.backgroundColor!="") { blnOk=false; }
  if(document.body.style.color!="") { blnOk=false; }
  if(document.body.style.marginTop!="") { blnOk=false; }
  if(document.getElementById) {
    with(document.getElementById("texte").style) {
      if(position!="") { blnOk=false; }
      if(top!="") { blnOk=false; }
      if(left!="") { blnOk=false; }
      if(width!="") { blnOk=false; }
      if(height!="") { blnOk=false; }
      if(zIndex!="") { blnOk=false; }
      if(margin!="") { blnOk=false; }
      if(padding!="") { blnOk=false; }
      if(visibility!="") { blnOk=false; }
    }
  }
  else{
  blnOk=false;
  }
 
  if(blnOk) {
    with(document.body.style) {
      backgroundColor="#FFF";
      color="#000";
      marginTop="0em";
    }
 
    with(document.getElementById("access").style) {
      position="absolute";
      top="1em";
      left="1em";
      margin="0";
    }
 
    with(document.getElementById("texte").style) {
      margin="0";
      padding="1em";
      backgroundColor="#FFF";
      color="#333";
    }
 
    for(i=1;i<=6;i++) {
      with(document.getElementById("menu"+i).style) {
        position="absolute";
        top="6em";
        left=(((i-1)*8)+8)+"em";
        width="7em";
        height="1.2em";
        textAlign="center";
        margin="0";
        padding="0";
        zIndex="2";
      }
    }
 
    for(i=1;i<=6;i++) {
      with(document.getElementById("ssmenu"+i).style) {
        position="absolute";
        top="7.4em";
        left=(((i-1)*8)+8)+"em";
        width="12em";
        margin="0";
        padding="0";
        zIndex="3";
      }
    }
 
    with(document.getElementById("copy").style) {
      backgroundColor="#333";
      color="#FFF";
    }
 
    CacherMenus();
  }
}
 
function MontrerMenu(strMenu) {
  if(blnOk) {
    CacherMenus();  
    document.getElementById(strMenu).style.visibility="visible";
  }
}
 
function CacherMenus() {
  if(blnOk) {
    for(i=1;i<=6;i++) {
      with(document.getElementById("ssmenu"+i).style) {
        visibility="hidden";
      }
    }
  }
}

Et voici comment je l'insère dans ma page:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<div class="menuZone">
  <p id="access" onmouseover="CacherMenus();">
    </p>
    <div id="texte" onmouseover="CacherMenus();">
    </div>
    <hr>
    <p id="menu1" class="menu">
      <a href="#" title="Accueil" onmouseover=
        "CacherMenus('ssmenu1');" onfocus=
        "CacherMenus('ssmenu1');">Accueil<span>&nbsp;:</span></a>
    </p>
    <ul id="ssmenu1" class="ssmenu">
    </ul>
    <p id="menu2" class="menu">
      <a href="#" title="Le club" onmouseover=
        "MontrerMenu('ssmenu2');" onfocus=
        "MontrerMenu('ssmenu2');">Le club<span>&nbsp;:</span></a>
    </p>
    <ul id="ssmenu2" class="ssmenu">
      <li>
        <a href="#" title=
          "Historique">Historique</a><span>&nbsp;;</span>
      </li>
      <li>
        <a href="#" title=
          "Organisation">Organisation</a><span>&nbsp;;</span>
      </li>
      <li>
        <a href="#" title=
          "Tarifs">Tarifs</a><span>&nbsp;;</span>
      </li>
 
    </ul>
    <p id="menu3" class="menu">
      <a href="#" title="Ski & Snow" onmouseover=
        "MontrerMenu('ssmenu3');" onfocus=
        "MontrerMenu('ssmenu3');">Ski & Snow<span>&nbsp;:</span></a>
    </p>
    <ul id="ssmenu3" class="ssmenu">
      <li>
        <a href="#" title=
          "Moniteurs">Moniteurs</a><span>&nbsp;;</span>
      </li>
      <li>
        <a href="#" title="Ecole de ski">Ecole de ski</a>
          <span>&nbsp;;</span>
      </li>
    </ul>
	<p id="menu4" class="menu">
      <a href="#" title="Agenda" onmouseover=
        "CacherMenus('ssmenu4');" onfocus=
        "CacherMenus('ssmenu4');">Agenda<span>&nbsp;:</span></a>
    </p>
    <ul id="ssmenu4" class="ssmenu">
    </ul>
 
	<p id="menu5" class="menu">
      <a href="#" title="Galeries photos" onmouseover=
        "MontrerMenu('ssmenu5');" onfocus=
        "MontrerMenu('ssmenu5');">Photos<span>&nbsp;:</span></a>
    </p>
    <ul id="ssmenu5" class="ssmenu">
      <li>
        <a href="#" title=
          "Saison 2004-2005">Saison 2004-2005</a><span>&nbsp;;</span>
      </li>
      <li>
        <a href="#" title="Saison 2005-2006">Saison 2005-2006</a>
          <span>&nbsp;;</span>
      </li>
	  <li>
        <a href="#" title="Saison 2006-2007">Saison 2006-2007</a>
          <span>&nbsp;;</span>
      </li>
    </ul>
	<p id="menu6" class="menu">
      <a href="#" title="Inscriptions" onmouseover=
        "MontrerMenu('ssmenu6');" onfocus=
        "MontrerMenu('ssmenu6');">Inscriptions<span>&nbsp;:</span></a>
    </p>
    <ul id="ssmenu6" class="ssmenu">
      <li>
        <a href="#" title=
          "Inscriptions au club">Inscriptions au club</a><span>&nbsp;;</span>
      </li>
      <li>
        <a href="#" title="Champéry">Champéry</a>
          <span>&nbsp;;</span>
      </li>
    </ul>
  </div>

Merci pour votre aide