Cellule de sous-menu

Version imprimable

Bonsoir,
Voila j'ai un petit soucis de menus. J'ai creer un menu principal :

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
<table>
      <tr>
        <td>
          <a href="acceuil.html" target="frame">Accueil</a></td>
        <td>
          <a href="#" target="frame">Définition</a></td>
        <td>
          <a href="#" target="frame">Histoire</a></td>
        <td>
          <a href="#" target="frame">Elaborations </a></td>
        <td onclick="application_update()" onmouseover="this.style.cursor='pointer'"> Applications
          <div id="application_details">
            <div>
              <a href="#" target="frame">Informatique</a>
            </div>
            <div>
              <a href="#" target="frame">Materiaux</a>
            </div>
          </div></td>
        <td>
          <a href="#" target="frame">FAQ's</a></td>
        <td>
          <a href="#" target="frame">Contact</a></td>
      </tr>
    </table>

dans lequel, comme vous pouvez le remarquer, je fais appel a une fonction JS pour faire apparaitre mon sous-menu :

Code:

1
2
3
4
5
6
7
8
function application_update(){
application=document.getElementById("application_details");
	  if(application.style.display=="none") {
	    application.style.display="block";
	  } else {
	    application.style.display="none";
	  }
}

Cependant j'ai un sousic. En effet mon sous-menu apparait dans la meme case que mon menu " Application " . Donc j'aimerai savoir comment faire pour le mettre dans deux cases différentes l'une en dessous de l'autre?
Merci

13/02/2008, 16h35
kev484

:aie: Plz de l'aide. Je pense qu'il faut faire sa avec de <td> caché et en mettant une div class et non un id a mon apllication mais existe il : document.getElementByClass. Je ne pense pas donc comment faire.
Merci
13/02/2008, 17h40
_Mac_

Je pense que le pb c'est la structure de ton menu : pourquoi passes-tu par des tables plutôt que par des div ?
13/02/2008, 18h22
kev484

J'en sais rien .... Comment peut-on faire avec des div?

On peut faire avec des listes en tout cas :

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
<html>
<body>
<script>
function application_update(){
	application = document.getElementById("application_details");
	if (application.style.display == "block") {
		application.style.display = "none";
	} else {
		application.style.display = "block";
	}
}
</script>
 
<style>
ul.mainMenu {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}
 
ul.mainMenu li {
	display: inline;
}
 
ul.subMenu {
	list-style-type: none;
	display: none;
	position: absolute;
	left: 0px;
	top: 1em;
}
 
ul.subMenu li {
	display: block;
}
</style>
 
<ul class="mainMenu">
	<li><a href="acceuil.html" target="frame">Accueil</a></li>
	<li><a href="#" target="frame">Définition</a></li>
	<li><a href="#" target="frame">Histoire</a></li>
	<li><a href="#" target="frame">Elaborations</a></li>
	<li style="position: relative;" onclick="application_update();" onmouseover="this.style.cursor='pointer'">Applications
		<ul id="application_details" class="subMenu">
			<li><a href="#" target="frame">Informatique</a></li>
			<li><a href="#" target="frame">Materiaux</a></li>
		</ul>
	</li>
	<li><a href="#" target="frame">FAQ's</a></li>
	<li><a href="#" target="frame">Contact</a></li>
</ul>
 
</body>
</html>

14/02/2008, 18h47
kev484

Voila merci c'est ce que je souhaite faire mais avec ce code est ce que je peut creer des cases comme je faisais avec mes td?
14/02/2008, 23h45
le_chomeur

Oui il n'y a aucun soucis il te suffit juste de créer la bonne structure :)
15/02/2008, 10h29
_Mac_

Et d'utiliser la bonne CSS.
15/02/2008, 16h39
kev484

Ok merci, je vais essayer avec tout cela et je vous tiens au courand merci encore.