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

Lien Déroulant ?

JavaScript

Vue hybride

Discussions similaires

Partager

Partager