affichage de menu

1 pièce(s) jointe(s)

affichage de menu

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:

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:

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

bonjour,

Il y a sans doute un problème dans le positionnement ou l'imbrication des éléments. Ce qui est surprenant c'est qu'au début de ton code HTML tu as un p et un div vides.
Par ailleurs tu écris :
Code:

1 2 3 4 <a href="#" title="Accueil" onmouseover= "CacherMenus('ssmenu1');" onfocus= "CacherMenus('ssmenu1');">Accueil<span> :</span></a>
alors que la fonction CacherMenus() ne prend aucun paramètre.

Sinon, est-ce que cet exemple de menu répond à tes attentes ?

(Si nécessaire je peux t'aider à le mettre en page).

Salut,

Oui cet exemple correspond tout à fait à ce que je recherche.
Je vais regarder ce que je peux faire avant de "t'embeter" avec des questions.

Merci beaucoup

1 pièce(s) jointe(s)

En fait j'ai un problème.

J'ai modifié un peu le design du menu et j'obtiens ceci (photo).
Le problème est qu'il y a toujours cet encadré bleu (extérieur) que je n'arrive pas a enlever.

Merci pour ton aide

Là, sans code, je peux difficilement dire ce qui ne va pas. A priori cela viendrait de la feuille de style (les items et le titre des menus ont les mêmes classes).

Mais pour être sûr, je préférerais que tu postes ton code du menu (CSS, JS et html).

Oui il s'agissait de la feuille de style.
Merci