affichage de menu

**gids01** · 06/02/2007, 09h55

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

**Auteur** · 06/02/2007, 15h07

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 :

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

1
2
3
4
 
<a href="#" title="Accueil" onmouseover=
        "CacherMenus('ssmenu1');" onfocus=
        "CacherMenus('ssmenu1');">Accueil<span>&nbsp;:</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).

**gids01** · 07/02/2007, 13h23

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

**gids01** · 07/02/2007, 14h11

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

**Auteur** · 07/02/2007, 16h40

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).

**gids01** · 08/02/2007, 15h51

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

affichage de menu

JavaScript

Discussions similaires

Partager

Partager