Lien Déroulant ?

Version imprimable

09/10/2009, 22h51
loubiak67

1 pièce(s) jointe(s)

Lien Déroulant ?

Bonsoir à tous
(Je suis en train de réaliser un site web en css et html)
J'ai beaucoup de calque ( au moins 15 dans une page )

J'aimerais que lors que le clic sur un lien il y un calque qui descend vers le bas et bien entendu lorsque je reclic sur le lien il disparait.

J'espère que vous m'avez compris
Je vous remercie d'avance

A bientôt
10/10/2009, 00h01
sebhm

Bonjour,

quand tu dis calque, ca correspond à quelle balise HTML ?
ensuite, c'est assez simple de les faire apparaitre/disparaitre lors d'un click (on passe sur l'effet d'affichage).
Il faut capturer l'evenement du click :

Code:

onclick

et afficher/masquer le calque 2 :

Code:

document.getElementById('calque2').style.display='nonr'/'block';

Montre nous deja un bout de code

Bonjour loubiak67 et Bienvenu sur les forums developpez.net !

Ce genre d'animations est classique en javascript, voici ce que ça peut donner :

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
<html>
<head>
	<script type="text/javascript">
                function showHideContent(num) {
                        contentDom=document.getElementById("layer"+num+"-content");
                        arrowDom=document.getElementById("layer"+num+"-arrow");
                        if(contentDom.style.display=="none") {
                                contentDom.style.display=""
                                arrowDom.innerHTML="⇑";
                        } else {
                                contentDom.style.display="none"
                                arrowDom.innerHTML="⇓";
                        }
                }
        </script>
	<style>
                .layer {
                        cursor: pointer;
                        margin: 1em;
                        padding: 0.2em;
                        font-weight: bold;
                        text-transform: uppercase;
                        border: 1px black solid;
                }
                .layer span {
                        width: 20px;
                        display: inline-block;
                        text-align: center;
                }
        </style>
</head>
<body> 
<div class="layer" onclick="showHideContent(1)"><span id="layer1-arrow">⇓</span> Layer 1</div>
<div id="layer1-content" style="display:none">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
<div class="layer" onclick="showHideContent(2)"><span id="layer2-arrow">⇓</span> Layer 2</div>
<div id="layer2-content" style="display:none">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
</body>
</html>

N'hésite pas à poser tes questions ;)

Bon week-end,
Thomas.

10/10/2009, 00h21
loubiak67

Bonsoir
Merci de votre réponse
Au sujet du code je n'ai rien par rapport a ce que je demande je ne sais pas comment m'y prendre
Peut être un exemple de site
http://www.destress.be ( prendre le deuxième lien en bas "L'origine du massage assis")

J'aimerais ce type de déroulement
Merci pour vos réponses
A bientôt
10/10/2009, 00h27
tzilliox

Bonsoir loubiak67 !

As-tu essayé le code que je t'ai donné ?

Bon courage,
Thomas.
10/10/2009, 00h29
loubiak67

Bonsoir
Merci de votre réponse
Je vais essayer votre code
Je vous tiens au courant
Merci
A bientôt
10/10/2009, 15h35
loubiak67

Bonjour
C'est presque ce que je voulais
Cet exemple la c'est exactement ce que j'aimerai faire
http://www.destress.be ( prendre le deuxième lien en bas "L'origine du massage assis")

Merci
10/10/2009, 16h02
tzilliox

Bonjour !

J'ai bine compris ;)
Mais c'est quoi la différence pour toi ?

Bon après-midi,
Thomas.
10/10/2009, 17h13
loubiak67

Bonjour
en faite par rapport au site de l'exemple précédent si on clic sur le deuxième lien et que le premier est déjà ouvert il ( le lien 1) se referme automatiquement pour afficher le deuxième liens j'espère que vous m'avez compris

Par rapport aux code que vous m'avez donné au niveau de la longueur peut on la diminuer ?

Merci
10/10/2009, 17h27
sebhm

Tu peux modifier le comportement pour qu'il fasse ce que tu veux.
Tu peux modifier le css pour que ca ressemble à ce que tu veux.

Mais Thomas est deja bien gentil de te pondre le code en entier, faut y mettre un peu du tien aussi !
10/10/2009, 17h35
loubiak67

Bonjour
Pour répondre à vos propos je me mets depuis 5 cinq jours en faisant des test
je n'y arrive pas c'est compliqué je fais des recherches sur le net depuis 5 jours je n'y arrive pas alors je ne vous permets pas de dire "faut y mettre un peu du tien aussi ! "

Je fais ce que je peux
Dans ces cas la étant donné que je dois m'y mettre je vais peut être m'adresser à un autre forum comme ça sa ne vous posera pas de problème.
Aurevoir

Ne boude pas ! :aie:

Tu ne trouveras pas meilleur forum...

Je dis juste qu'en regardant ce que t'a donné Thomas, tu peux y arriver tout seul.
J'ajoute juste un peu de javascript au code de Thomas :

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
<html>
<head>
	<script type="text/javascript">
		function showHideContent(num) {
			contentDom=document.getElementById("layer"+num+"-content");
			arrowDom=document.getElementById("layer"+num+"-arrow");
			if(contentDom.style.display=="none") {
				contentDom.style.display=""
				arrowDom.innerHTML="⇑";
			} else {
				contentDom.style.display="none"
				arrowDom.innerHTML="⇓";
			}
 
			//on cache les autres
			var nb_content=3;
			for(i=1;i<=nb_content;i++) {
			 contentDom=document.getElementById("layer"+i+"-content");
			 arrowDom=document.getElementById("layer"+i+"-arrow");
			 if (i!=num && contentDom.style.display!="none") {
			   contentDom.style.display="none"
			   arrowDom.innerHTML="⇓";
			 }
			}
		}
	</script>
	<style>
		.layer {
			cursor: pointer;
			margin: 1em;
			padding: 0.2em;
			font-weight: bold;
			text-transform: uppercase;
			border: 1px black solid;
		}
		.layer span {
			width: 20px;
			display: inline-block;
			text-align: center;
		}
	</style>
</head>
<body> 
<div class="layer" onclick="showHideContent(1)"><span id="layer1-arrow">⇓</span> Layer 1</div>
<div id="layer1-content" style="display:none">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
<div class="layer" onclick="showHideContent(2)"><span id="layer2-arrow">⇓</span> Layer 2</div>
<div id="layer2-content" style="display:none">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
<div class="layer" onclick="showHideContent(3)"><span id="layer3-arrow">⇓</span> Layer 3</div>
<div id="layer3-content" style="display:none">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</div>
</body>
</html>

Citation:

Par rapport aux code que vous m'avez donné au niveau de la longueur peut on la diminuer ?

quelle longueur ?
si c'est pour les DIV "layer", ajoute ceci au CSS :

Code:

width : 20%;

et à partir de ça, tu peux faire pleins de choses un peu différentes

Bonsoir loubiak67 et sebhm !

T'as réponse est très bien sebhm, mais je n'aurais pas forcément fait comme ça ! J'aurais plutôt refermer le layer qui est actuellement ouvert, au lieu de tous. Ainsi il n'y a pas de doublon de code et tu n'as pas besoin de préciser combien tu as de layer :
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 currentLayer=0; function onClickLayer(num) { // On ouvre ou on ferme le menu clické showHideContent(num); // Si le layer ouvert était celui sur lequel on a clické, il n'y a plus de layer ouvert if(currentLayer==num) { currentLayer=0; // Sinon il y a un layer ouvert } else { // S'il y a un layer d'ouvert if(currentLayer!=0) { showHideContent(currentLayer); } // On indique le nouveau layer ouvert currentLayer=num; } } function showHideContent(num, action) { contentDom=document.getElementById("layer"+num+"-content"); arrowDom=document.getElementById("layer"+num+"-arrow"); // Si le layer est fermé ou l'ouvre if(contentDom.style.display=="none") { contentDom.style.display="" arrowDom.innerHTML="⇑"; // Si le layer est ouvert on le ferme } else { contentDom.style.display="none" arrowDom.innerHTML="⇓"; } }
Tu peux voir une démonstration sur cette page ;)

Pour loubiak67, sebhm a raison ! Il faut apprendre le javascript (et le CSS) car on ne sera pas toujours là pour t'aider. Ainsi la fonction que je t'ai donné faisait pratiquement tout, il te suffisait de faire quelques modifications.
Donc j'espère que :
T'as essayé de modifier le javascirpt que je t'avais donné
T'as lu et essayé de comprendre la fonction. Comme tu peux le voir certaines parties sont commentées pour t'aider, et si tu ne compreds pas comment ça marche on est partant pour te l'expliquer ;)

Allé bonne nuit à vous 2,
Thomas.

25/10/2009, 12h21
loubiak67

Bonjour
Merci de vos réponses
Excusez moi de ma réponse tardive après une bonne bronchite et rhinopharyngite je suis à nouveau d'attaque j'ai bien pris vos conseille mais j'ai encore quelques soucis j'aimerais en fait que sur la même ligne il y en deux barre
Je ne sais pas comment faire
Pouvez vous m'aider?
Je vous remercie d'avance
27/10/2009, 04h33
vodiem

salut sebhm, Thoams et bienvenu loubiak67,

j'ai pas compris l'idée des deux barres.
les codes que t'ont donnée généreusement de Thoams et sebhm font apparaitre et disparaitre le contenu.
ils ont l'avantage d'être simple mais si tu souhaites faire un affichage coulissant tu peux trouver un exemple avec code ici que tu pourrais adapter si tu te sent suffisamment aguérit.

bon courage. ;)
28/10/2009, 22h57
loubiak67

Bonsoir
Merci de votre réponse
Effectivement le code que Thoams et sebhm mon beaucoup aidé avec quelque modification que je remercie de tout cœur .
Par rapport aux deux barres (ou plus) c'est en fait que j'ai beaucoup de contenu et je ne veux pas que les utilisateurs de mon futur site internet soient obligés de chercher l'info tout en bas de ma page la je coince vraiment pour résoudre le problème.

Je vous remercie de votre aide
A bientôt