Menu déroulant verticale dynamique

2 Janvier 2007 11:46:38

Salut à tous.

Voila j'ai un ptit problème avec mon menu déroulant. Tout marche jusqu'à ce que je veux faire appel à une fonction "clicMenu" qui me permet, si je clic sur le menu, de faire apparaitre les sous menus qui sont cachés.
A priori rien de bien compliqué, cependant ça ne marche pas.
Si vous pourriez m'aider je vous en serai très reconnaissant.

Merci d'avance
++

code :

<HTML>

<HEAD>

<script language="Javascipt">

function  clicMenu(num) 

{ 

 
  // Booléen reconnaissant le navigateur (vu en partie 2)

  isIE = (document.all) 

  isNN6 = (!isIE) && (document.getElementById)

 
  // Compatibilité : l'objet menu est détecté selon le navigateur

  if (isIE) menu = document.all['menu' + num];

  if (isNN6) menu = document.getElementById('menu' + num);

 
  // On ouvre ou ferme

  if (menu.style.display == "none"){

    // Cas ou le tableau est caché

    menu.style.display = ""

  } else {

    // On le cache

    menu.style.display = "none"

   }

}

</script>

<link href="styleTxt.css" rel="stylesheet" type="text/css"> 

</HEAD>

<table width="300" cellspacing="1" cellpadding="0">

<tr> <td class="titre"> Titre 1 </td> </tr>

<tr> <td class="titre"> Titre 2 </td> </tr>

<tr> <td class="titre" onClick="clicMenu(1)"> Titre 3 </td> </tr>

<tr style="display:'none'" id="menu1"> <td> <table width="200" cellspacing="0" cellpadding="0">

<tr> <td class="soustitre"> Sous-titre 1 </td> </tr>

<tr> <td class="soustitre"> Sous-titre 2 </td> </tr>

<tr> <td class="soustitre"> Sous-titre 3 </td> </tr>

<tr> <td class="soustitre"> Sous-titre 4 </td> </tr>

<tr> <td class="soustitre"> Sous-titre 5 </td> </tr>

<tr> <td class="soustitre"> Sous-titre 6 </td> </tr>

<tr> <td class="soustitre"> Sous-titre 7 </td> </tr>

</table> </td> </tr>

<tr> <td class="titre"> Titre 4 </td> </tr>

</table>

</HTML>

Autres pages sur : menu deroulant verticale dynamique

| Etre averti des réponses
| Alerter

Répondre à EnPleineGalere

KangOl

2 Janvier 2007 18:26:59

merci d'utiliser la balise [code]

| Alerter

Répondre à KangOl

EnPleineGalere

3 Janvier 2007 09:54:56

Voila c'est fait : )

Sinon toujours aucune solution qui vous viendrez à l'esprit?

| Alerter

Répondre à EnPleineGalere

sisier

3 Janvier 2007 13:29:30

je ne connais rien en JS.
Mais ton javaScript ne te renvoit pas d'erreur? ca pourrait peut etre t'aider.

| Alerter

Répondre à sisier

po134

3 Janvier 2007 16:33:13

<body>

<script language="javascript" type="text/javascript">

<!--

window.onload=montre;

function montre(id) {

var d = document.getElementById(id);

	for (var i = 1; i<=10; i++) 

            {

		if (document.getElementById('smenu'+i)) 

                          {

                                   document.getElementById('smenu'+i).style.display='none';}

	             }

if (d) 

{

            d.style.display='block';}

}

//-->

</script>

<dl id="menu">

		<dt onclick="javascript:montre();"><a href="#">Menu 1</a></dt>

 
		<dt onclick="javascript:montre('smenu2');">Menu 2</dt>

			<dd id="smenu2">

				<ul>

					<li><a href="#">Sous-Menu 2.1</a></li>

					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>

				</ul>

			</dd>	

 
		<dt onclick="javascript:montre('smenu3');">Menu 3</dt>

			<dd id="smenu3">

				<ul>

					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>

				</ul>

			</dd>

 
		<dt onclick="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4">

				<ul>

					<li><a href="#">Sous-Menu 4.1</a></li>

					<li><a href="#">Sous-Menu 4.1</a></li>

				</ul>

			</dd>

 
</dl>

</body>

Celui la marche ... bien sûr avec une bonne feulle de style cela peut ressembler a un menu décent

si tu veux un exemple du css que j'utilise:

dl, dt, dd, ul, li {

margin: 0;

padding: 0;

list-style-type: none;

}

#menu {

position: absolute;

top: 0;

left: 0;

}

#menu {

width: 15em;

}

#menu dt {

cursor: pointer;

margin: 2px 0;;

height: 20px;

line-height: 20px;

text-align: center;

font-weight: bold;

border: 1px solid gray;

background: #ccc;

}

#menu dd {

border: 1px solid gray;

}

#menu li {

text-align: center;

background: #fff;

}

#menu li a, #menu dt a {

color: #000;

text-decoration: none;

display: block;

border: 0 none;

height: 100%;

}

 
#menu li a:hover, #menu dt a:hover {

background: #eee;

Bonne chance! Je préfères que tu te base d'un travail déjà complété pour modifier le tien et corriger tes erreurs que de te corriger le tient comme ça tout cuit dans le bec :jap:

[Bien que ce que je te donnes soit aussi du pré-maché...] Je te conseil de faire un petit effort et d'essayer de comprendre, si tu as des questions hésites pas.

| Alerter

Répondre à po134

KangOl

3 Janvier 2007 20:04:34

http://css.maxdesign.com.au/listamatic/

| Alerter

Répondre à KangOl

EnPleineGalere

3 Janvier 2007 22:50:18

Meme après comparaison avec l'exemple donné, je ne comprend toujours pas pourquoi cela ne marche pas.
D'après IE, mon erreur ce situe à la ligne où je fait appel à la fonction "onclick". Mais je ne voie pas ce que j'ai mal écrit ou ce que j'aurai du écrire.

Possible de m'éclairer un peu plus svp?

| Alerter

Répondre à EnPleineGalere

KangOl

3 Janvier 2007 22:54:24

règle numéro un : utiliser firefox pour le débuggage javascript
règle numéro deux : utiliser firefox avec les bon plugins (firebug entre autres)

| Alerter

Répondre à KangOl

marsien

Expert Programmation

4 Janvier 2007 18:28:41

Citation :

règle numéro un : utiliser firefox pour le débuggage javascript
règle numéro deux : utiliser firefox avec les bon plugins (firebug entre autres)

Ou l'extension web developper

| Alerter

Répondre à marsien

EnPleineGalere

5 Janvier 2007 00:11:12

et mettant en parenthese ca : ), pour en revenir au code, j'ai effectué divers test et je me retrouve avec l'erreur qui se situe la ou je fais appel à la fontion onclick.
En changeant directement la fonction, le code fonctionnait presque. Donc à priori ce n'est pas de la maniere que je l'appelle qui déconne, mais la fonction en elle meme.

<script language="Javascipt">

function  clicMenu(num)

{

 
  // Booléen reconnaissant le navigateur 

  isIE = (document.all)

  isNN6 = (!isIE) && (document.getElementById)

 
  // Compatibilité : l'objet menu est détecté selon le navigateur 

  if (isIE) menu = document.all['menu' + num];

  if (isNN6) menu = document.getElementById('menu' + num);

 
  // On ouvre ou ferme 

  if (menu.style.display == "none" ){

    // Cas ou le tableau est caché 

    menu.style.display = ""

  } else {

    // On le cache 

    menu.style.display = "none"

   }

}

</script>

Est ce qu'à priori, un truc vous choque dans ce que j'ai écrit la?
J'ai testé avec ca :

<script language="javascript" type="text/javascript">

<!--

window.onload=montre;

function montre(id) {

var d = document.getElementById(id);

    for (var i = 1; i<=10; i++)

            {

        if (document.getElementById('smenu'+i))

                          {

                                   document.getElementById('smenu'+i).style.display='none';}

                 }

if (d)

{

            d.style.display='block';}

}

//--> 

</script>

et bien que ca marche, ca ne me donne pas le résultat souhaité, enfin plutot ca ne fait pas tout, c'est à dire que je peux bien ouvrir mon menu comme je le souhaite, cependant je peux pas le fermé, et je ne comprend pas trop ce code pour pourvoir y apporter des modifs.

Si possible j'aimerai encore avoir un peu de votre aide, soit pour m'aider à réparer l'erreur dans mon premier code au nivea de la fonction, soit pour pouvoir à partir du second refermé mon sous-menu.

Merci d'avance
++