Lien Déroulant ?

**loubiak67** · 09/10/2009, 22h51

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

**sebhm** · 10/10/2009, 00h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick

et afficher/masquer le calque 2 :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Montre nous deja un bout de code

**tzilliox** · 10/10/2009, 00h11

Bonjour loubiak67 et Bienvenu sur les forums developpez.net !

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**loubiak67** · 10/10/2009, 00h21

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

**tzilliox** · 10/10/2009, 00h27

Bonsoir loubiak67 !

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

Bon courage,
Thomas.

**loubiak67** · 10/10/2009, 00h29

Bonsoir
Merci de votre réponse
Je vais essayer votre code
Je vous tiens au courant
Merci
A bientôt

**loubiak67** · 10/10/2009, 15h35

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

**tzilliox** · 10/10/2009, 16h02

Bonjour !

J'ai bine compris

Mais c'est quoi la différence pour toi ?

Bon après-midi,
Thomas.

**loubiak67** · 10/10/2009, 17h13

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

**sebhm** · 10/10/2009, 17h27

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 !

**loubiak67** · 10/10/2009, 17h35

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

**sebhm** · 10/10/2009, 20h49

Ne boude pas !

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

width : 20%;

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

**tzilliox** · 11/10/2009, 00h39

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**loubiak67** · 25/10/2009, 12h21

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

**vodiem** · 27/10/2009, 04h33

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.

**loubiak67** · 28/10/2009, 22h57

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

Lien Déroulant ?

JavaScript

Discussions similaires

Partager

Partager