Menu déroulant verticale dynamique

  • Auteur de la discussion EnPleineGalere
  • Date de début

EnPleineGalere

Nouveau membre
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 :

[cpp]
<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>

[/cpp]
 

EnPleineGalere

Nouveau membre
Voila c'est fait : )

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

sisier

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

po134

Habitué
[cpp]<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>[/cpp]

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:
[cpp]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;
[/cpp]

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 :merci: [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.
 

EnPleineGalere

Nouveau membre
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?
 

KangOl

Grand Maître
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)
 

marsien

Grand Maître
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 :)
 

EnPleineGalere

Nouveau membre
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.

[cpp]

<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>
[/cpp]

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

[cpp]
<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>
[/cpp]

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
++
 

boub popsyteam

Grand Maître
ligne 3 -> window.onload=montre; il manque un (ID) ... avec l'ID ...

De plus tu déclare ta fonction APRES son appel, c'est le mal :evil:
 

KangOl

Grand Maître

personnellement je préfère firebug ...

meme si les deux sont installés :D
 

marsien

Grand Maître
En effet, Firebug s'est bien amélioré depuis les premières versions que j'avais testé. Adopté aussi :)
 
Vous devez vous inscrire ou vous connecter pour répondre ici.
Derniers messages publiés
Statistiques globales
Discussions
730 079
Messages
6 716 705
Membres
1 586 247
Dernier membre
MrAzgarIII
Partager cette page
Haut