cherche a modifier un menu en arborescence
salut à tous, voila je suis ne m'y connais pas top top en js, et j'ai cherché un script sur le net pour créer un menu arborescent, il fonctionne super bien mais j'aimerais pouvoir modifier quelques petites choses, j'espere que vous saurez m'aider........... :
- quand on clique sur une rubrique, s'en déroule les sous menus, mais pour replier la rubrique, il faut cliquer en bas sur le lien "fermer".
j'aimerais que l'on puisse replier la rubrique en cliquant à nouveau sur son nom (et donc disparition du lien fermer)
- lorsqu'on ouvre une rubrique, le sous menu se déplie et alors on accède à des liens
j'aimerais que le nom de la rubrique puisse aussi être un lien, en plus du déliement du sous menu..
- Quand on ouvre une rubrique et que l'on clique sur un lien du sous menu, j'aimerais que le sous menu reste ouvert lors du chargement du lien (mais ca je pense que c'est encore autre chose)
voila vous pensez pouvoir me filer un coup d'pouce? :) je vous met les codes:
(j'ai des includes donc pas d'index ici)
menu.html
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
| <div id="liens1">
<p>
<input type="submit" value="Rechercher" /><br /><br />
<input type="text" />
</p>
</div>
<div id="liens2">
<strong><a href="javascript:go(1)">Configurations</a></strong><br>
<DIV ID="rubrique1" STYLE="position:relative; padding-bottom:5px"></div>
<strong><a href="javascript:go(2)">Composants</a></strong><br>
<DIV ID="rubrique2" STYLE="position:relative; padding-bottom:5px"></div>
<strong><a href="ecrans.php" title="">Moniteurs</a></strong><br>
<DIV ID="rubrique3" STYLE="position:relative; padding-bottom:5px"></div>
<strong><a href="notebook.php" title="">Portables</a></strong><br>
<DIV ID="rubrique4" STYLE="position:relative; padding-bottom:5px"></div>
<strong><a href="oc.php" title="">Services</a><br>
<DIV ID="rubrique5" STYLE="position:relative; padding-bottom:5px"></div>
</div>
<div id="liens3">
<p>
<strong>S'inscrire à la newsletters</strong><br /><br />
Entrez votre adresse mail pour être avertis directement des nouveautés:<center><input type="text" />
<input type="submit" value="Inscription" /></center>
</p>
</div> |
menu.js:
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
| rub1 = ' <a href="pc1.php">Budget</a><br> <a href="pc2.php">Familiale</a><br> <a href="pc3.php">Multimédia</a><br> <a href="pc4.php">Gamer</a><br> <a href="pc5.php">Ultra gamer</a><br> <a href="pc6.php">Top-du-Top</a><br>';
rub2 = ' <a href="boitiers.php">Boitiers</a><br> <a href="mb.php">Cartes mères</a><br> <a href="cpu.php">Processeurs</a><br> <a href="ram.php">Mémoire</a><br> <a href="gpu.php">Cartes graphiques</a><br> <a href="hdd.php">Disques durs</a><br> <a href="lecteurs.php">Optique</a><br> <a href="son.php">Cartes son</a><br> <a href="ctrl.php">Contrôleurs & interface</a><br> <a href="tuner.php">TunerTv</a><br> <a href="fan.php">Ventilateurs</a><br>';
rub3 = ' <a href="">Lien 1</a><br> <a href="">Lien 2</a><br>';
rub4 = ' <a href="">Lien 1</a><br> <a href="">Lien 2</a><br>';
function fermer(e)
{
if(document.getElementById)
{
document.getElementById("rubrique"+e).innerHTML = '';
document.getElementById("rubrique"+e).style.position = 'absolute';
}
else if(document.all)
{
document.all["rubrique"+e].innerHTML = '';
document.all["rubrique"+e].style.position = 'absolute';
}
}
function go(n)
{
if(document.getElementById)
{
document.getElementById("rubrique"+n).style.position = 'relative';
if(n == 1)
{
document.getElementById("rubrique"+n).innerHTML = rub1 + " <a href='javascript:fermer("+n+")'>Fermer</a><br />";
}
if(n == 2)
{
document.getElementById("rubrique"+n).innerHTML = rub2 + " <a href='javascript:fermer("+n+")'>Fermer</a><br />";
}
if(n == 3)
{
document.getElementById("rubrique"+n).innerHTML = rub3 + " <a href='javascript:fermer("+n+")'>Fermer</a><br />";
}
if(n == 4)
{
document.getElementById("rubrique"+n).innerHTML = rub4 + " <a href='javascript:fermer("+n+")'>Fermer</a><br />";
}
}
else if(document.all)
{
document.all["rubrique"+n].style.position = 'relative';
if(n == 1)
{
document.all["rubrique"+n].innerHTML = rub1 + " <a href='javascript:fermer("+n+")'>Fermer</a><br />";
}
if(n == 2)
{
document.all["rubrique"+n].innerHTML = rub2 + " <a href='javascript:fermer("+n+")'>Fermer</a><br />";
}
if(n == 3)
{
document.all["rubrique"+n].innerHTML = rub3 + " <a href='javascript:fermer("+n+")'>Fermer</a><br />";
}
if(n == 4)
{
document.all["rubrique"+n].innerHTML = rub4 + " <a href='javascript:fermer("+n+")'>Fermer</a><br />";
}
}
} |
et le css concerné:
Code:
1
2
3
4
5
6
| #liens2{
height: 295px;
margin: 25px 0 0 0;
padding-left: 10px;
padding-bottom:5px;
} |
voila si vous avez besoin d'autre chose dites le, sinon... j'espere que je trouverais de l'aide sur ce forum ;) merci d'avance aux volontaires :)
