menu dynamique en javascript (grace a dreamweaver aussi ;)

menu dynamique en javascript (grace a dreamweaver aussi ;) - HTML/CSS - Programmation

Marsh Posté le 21-05-2003 à 16:09:43    

je viens de commencer a programmer en js et je viens de créer un menu en javascript il est composer de 12 éléments et je veu en afficher ke 6 a la fois
j'ai utiliser <hidden> et <visible>
au chargement il affiche les 6 1er element
kan je clic sur + le menu charge les 6 derniers element
 
maintenant j'aimerai kil affiche seulement 4 element a la fois
donc pour voir tout les elements je v devoir faire comme ceci :
 
- menu +
1
2
3
4
--------je clic sur +
- menu +
5
6
7
8
--------je clic sur +
- menu +
9
10
11
12
 
 
 
ainsi si ensuite je clic sur - je navigue vers les element du debut
je ne voi pas comment je pourrai faire
 
pourriez vous m aider en me donnant au moins un point de départ  
 
mc d'avance

Reply

Marsh Posté le 21-05-2003 à 16:09:43   

Reply

Marsh Posté le 21-05-2003 à 17:43:35    

un truc dans le style?
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
 <title>Sans titre</title>
 <script language="javascript">
 function showmenu(m)
 {
 
 node=document.getElementById("menu"+m);
 node.style.visibility = "visible";
 }
 </script>
</head>
 
<body>
<div id="m1">
1<br>
2<br>
3<br>
4<br>
<a href="#" onclick="showmenu(2);">+</a>
</div>
<div id="menu2" style="visibility:hidden">
5<br>
6<br>
7<br>
<a href="#" onclick="showmenu(3);">+</a>
</div>
<div id="menu3" style="visibility:hidden">
8<br>
9<br>
10<br>
</div>
</body>
</html>

Reply

Marsh Posté le 22-05-2003 à 08:49:00    

je te remerci mais c bon je me suis arranger en superposant des calques grace a dreamweaver

Reply

Marsh Posté le 05-06-2003 à 14:28:32    

Je remonte le topic...
 
Le script est basique et sympa, mais quelle est la méthode pour :
 
1
2
+ 3
4
 
 
lorsqu'on clique sur 3 :
 
1
2
- 3
 a
 b
 c
4
 
je ne vous demande pas un truc détaillé tellement l'exemple est nul, ce que j'aimerais c'est que lorsqu'on développe un menu le reste se décale vers le bas, et inverse quand on le remonte
 
j'ai beau essayer avec les DIV...

Reply

Marsh Posté le 05-06-2003 à 15:29:19    

kowalski a écrit :

Je remonte le topic...
 
Le script est basique et sympa, mais quelle est la méthode pour :
 
1
2
+ 3
4
 
 
lorsqu'on clique sur 3 :
 
1
2
- 3
 a
 b
 c
4
 
je ne vous demande pas un truc détaillé tellement l'exemple est nul, ce que j'aimerais c'est que lorsqu'on développe un menu le reste se décale vers le bas, et inverse quand on le remonte
 
j'ai beau essayer avec les DIV...


 
c'est quoi ton pb ? c'est le meme principe qu'au dessus il faut jouer sur la visibility des div


Message édité par kayasax le 05-06-2003 à 16:46:58
Reply

Marsh Posté le 05-06-2003 à 15:35:40    

ce que je vais mais ca me donne ca par ex :
 
tu vois c'est décalé du nombre de fils que le folder peut avoir :
 
1
2
3
+ 4  
 
 
 
 
 
 
a
b
c
 

Reply

Marsh Posté le 05-06-2003 à 16:47:30    

kowalski a écrit :

ce que je vais mais ca me donne ca par ex :
 
tu vois c'est décalé du nombre de fils que le folder peut avoir :
 
1
2
3
+ 4  
 
 
a
b
c
 
 


 
euh nan je vois pas ... url ?

Reply

Marsh Posté le 06-06-2003 à 09:45:04    

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Sans titre</title>
<script language="javascript">
        function showmenu(m)
        {
 
        node = document.getElementById("menu"+m);
        node.style.visibility = "visible";
        node2 = document.getElementById("plus"+m);
        node2.style.visibility = "hidden";
 
        }
        function hidemenu(m)
        {
 
        node = document.getElementById("menu"+m);
        node.style.visibility = "hidden";
        node2 = document.getElementById("plus"+m);
        node2.style.visibility = "visible";
 
        }
 
</script>
</head>
 
<body>
<div id="m1">
1<br>
2<br>
3<br>
</div>
<div id="plus2">
<a href="#" onclick="showmenu(2);">+</a> 4
</div>
<div id="menu2" style="visibility:hidden">
<a href="#" onclick="hidemenu(2);">-</a> 4
5<br>
6<br>
7<br>
<a href="#" onclick="showmenu(3);">+</a>
</div>
<div id="m2">
a<br>
b<br>
c<br>
</div>
</body>
</html>


 
En gros, mettez le dans votre navigateur : la place est "reservée pour 5 6 7, alors que je voudrais qu'a b c soit directement sous le 4

Reply

Marsh Posté le 06-06-2003 à 09:45:42    

PS ne cliquez pas partout hein :) je n'ai pas mis des noms de div corrects partout, ne cliquez que sur + 4 & - 4 :)

Reply

Marsh Posté le 06-06-2003 à 09:48:32    

PS : ceci ne doit fonctionne que sur IE 5 & +
c'est un intranet de boite avec tous les PC en NT4 + IE5
 
Bref, pour NS & le reste, on zappe, tant pis pr les DIV

Reply

Marsh Posté le 06-06-2003 à 09:48:32   

Reply

Marsh Posté le 06-06-2003 à 17:44:28    

exprime toi clairement je sais tjs pas ce que tu veux !!
genre ca ?
<body>
<div id="m1">
1<br>
2<br>
3<br>
</div>
<div id="plus2">
<a href="#" onclick="showmenu(2);">+</a> 4
</div>
<div id="menu2" style="visibility:hidden">
<a href="#" onclick="hidemenu(2);">-</a> 4<br>
<div id="m2" style="margin-left:50px">
a<br>
b<br>
c<br></div>
5<br>
6<br>
7<br>
<a href="#" onclick="showmenu(3);">+</a>
 
</div>
 
</body>

Reply

Marsh Posté le 08-06-2003 à 18:53:50    

Mets mon code dans un navigateur
 
mon probleme est simplement que moi je veux ca
 
1
2
+ 3
4
+ 5
6
 
en développant, je veux ca
 
1
2
+ 3
 a
 b
 c
4
+ 5
 a
 b
 c
6
 
OR, j'ai ca, sans développer :
 
1
2
+ 3
 
 
 
4
+ 5
 
 
 
6
 
la place des div hidden sont "réservés", je ne sais pas comment l'exprimer :'(
 
 

Reply

Marsh Posté le 10-06-2003 à 08:04:31    

Help j'aurais besoin d'une réponse aujourd'hui au taf :/

Reply

Marsh Posté le 10-06-2003 à 09:05:08    

Je sais pas trop t'expliquer poukoi mais sinon tu peux faire varier dynamiquement la taille des divs .
 
un exemple :


<html>
<head>
 <title>Sans titre</title>
 <script language="javascript">
 function showmenu(m)
 {
 
 node=document.getElementById("menu"+m);
 node.style.visibility = "visible";
 node.style.height="auto" ;
 }
 </script>
</head>
 
<body>
<div id="m1">
1<br>
2<br>
3<br>
4<br>
<a href="#" onclick="showmenu(2);">+</a>
</div>
<div id="menu2" style="visibility:hidden;height:0">
5<br>
6<br>
7<br>
<a href="#" onclick="showmenu(3);">+</a>
</div>
<div id="menu3" style="visibility:hidden">
8<br>
9<br>
10<br>
</div>
</body>
</html>


Reply

Marsh Posté le 10-06-2003 à 09:45:16    

Je t'en prie kayasax, utilise ce code :
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Sans titre</title>
<script language="javascript">
        function showmenu(m)
        {
 
        node = document.getElementById("menu"+m);
        node.style.visibility = "visible";
        node2 = document.getElementById("plus"+m);
        node2.style.visibility = "hidden";
 
        }
        function hidemenu(m)
        {
 
        node = document.getElementById("menu"+m);
        node.style.visibility = "hidden";
        node2 = document.getElementById("plus"+m);
        node2.style.visibility = "visible";
 
        }
 
</script>
</head>
 
<body>
<div id="m1">
1<br>
2<br>
3<br>
</div>
<div id="plus2">
<a href="#" onclick="showmenu(2);">+</a> 4
</div>
<div id="menu2" style="visibility:hidden">
<a href="#" onclick="hidemenu(2);">-</a> 4
5<br>
6<br>
7<br>
<a href="#" onclick="showmenu(3);">+</a>
</div>
<div id="m2">
a<br>
b<br>
c<br>
</div>
</body>
</html>


 
Je m'exprime mal car je n'ai aucun vocabulaire javascript
 
n'empeche que je genre en c un menu dont j'aimerais faire une arborescence (pas de probleme en c ou html, juste en js)
 
C'est peut etre mon navigateur (IE5), mais essaie dans le tien, entre  
1
2
3
+4
 
et  
 
a
b
c
 
il y a un espace de plusieurs lignes que je ne veux pas, il faut qu'au départ l'arborescence soit condensé, et qu'elle se développe en cliquant sur +
Je ne sais pas si c'est possible avec les DIV...
 
Abandonne le premier exemple et essaie celui ci stp, en regardant ce que vas te sortir ton browser ton comprendras mon probleme

Reply

Marsh Posté le 10-06-2003 à 09:56:01    

pt1 tu serais pas un peu faignant toi ???  
regarde mon code + haut je t'ai mis ce qu'il fallait (height=0 quand le div est masqué et "auto" quand tu l'affiches !!

Reply

Marsh Posté le 10-06-2003 à 10:04:18    

Je ne suis pas fainéant, je viens de mettre height:0 sur ma version, et ca ne fonctionne pas
 
height ne fait qu'allouer de la place supplémentaire et ne travaille pas en absolu :  
 
Essaie avec le code que je t'ai envoyé. J'ai essayé mais le height:0  n'a aucune incidence

Reply

Marsh Posté le 10-06-2003 à 10:56:19    

Effectivement le height ne fonctionnait pas j'ai remplace par display :
 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>Sans titre</title>
<script language="javascript">
        function switchmenu(m)
        {
         node = document.getElementById("menu"+m);
  if(node.style.visibility == "visible" )
   {node.style.visibility="hidden";}
  else node.style.visibility="visible";
  if(node.style.display=='none')
   {node.style.display='block';}
  else node.style.display='none';
         }
 
</script>
</head>
 
<body>
<div id="m1">
1<br>
2<br>
3<br>
</div>
<a href="#" onclick="switchmenu(2);">+</a> 4<br>
 
<div id="menu2" style="display: none;visibility:'hidden';">
 
a<br>
b<br>
c<br>
</div>
5<br>
6<br>
7<br>
 
</body>
</html>

Reply

Marsh Posté le 10-06-2003 à 11:11:48    

Remerciements puissance 1 milliard :)

Reply

Marsh Posté le 10-06-2003 à 11:30:33    

kowalski a écrit :

Remerciements puissance 1 milliard :)


 :)  :hello:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed