Tuto: Une Boite déroulante en CSS3 + Javascript

Tuto: Une Boite déroulante en CSS3 + Javascript

Par Papasti dans Accueil le 17 Octobre 2011 à 15:31

Une animation façon mootools, c'est ce que je vous propose aujourd'hui. On va pour cela utiliser les propriétés de transition du CSS3. (Ne fonctionne pas avec Internet Explorer)

Mais le plus simple pour se rendre compte des possibilites est de tester. Alors, passez votre souris sur les barres grisées ci-dessous.

Passez la souris ici pour voir le résultat

Une animation qui donne un effet plutôt sympa et réalisée sur la base de CSS3. A priori, cela n'est pas fonctionnel avec IE.
J'ai ajouté un peu de javascript pour assurer le déroulé et l'enroulé de la zone de texte, le tout avec une unique fonction.

Un peu d'Explications

A chaque titre correspond une balise div qui contient 2 autres balises selon la structure suivante:

<div id="zone1">
   <div id="bandeau1">.....</div>
   <div id="textederoule1">...</div>
</div>
<div id="zone2">
   <div id="bandeau2">.....</div>
   <div id="textederoule2">...</div>
</div>

La hauteur de premierezone est définie au départ avec la même valeur que celle de bandeau1 afin que l'on ne puisse pas voir le texte.
Au survol de la souris, (avec onmouseover) on appelle la fonction deroule qui active l'animation. Le premier paramètre de la fonction est une valeur correspondant à bandeau1 et le second la hauteur déroulée en pixels. Dès que l'on quitte le bandeau avec la souris (onmouseout), on rappelle cette même fonction en réduisant sa hauteur de déroulé.

Bien entendu vous pouvez fixer les autres propriétés CSS du bandeau, du texte et de la zone (couleurs, fond etc.)

Retrouvez ci-dessous le code de l'exemple de cet article.

<script type="text/javascript">// <![CDATA[
function deroule(champ,valeur)
{/*valeur est la hauteur en pixel de la zone*/
switch (champ)
{
case 1: /*si champ vaut 1 alors on change la hauteur de zone1*/
    document.getElementById("zone1").style.height=valeur+'px';
    break;
case 2: /*si champ vaut 2 alors on change la hauteur de zone2*/
    document.getElementById("zone2").style.height=valeur+'px';
    break;
}
}
// ]]></script>

<div id="zone1" style="width: 100%; height: 20px; background: White; border: 1px solid DimGrey; transition: height 1s; -moz-transition: height 1s;-webkit-transition: height 1s;-o-transition: height 1s; overflow: hidden;">
   <div id="bandeau1" style="height: 20px; width: 100%; font-size: medium; color: white; background-color: darkgrey;" onmouseover="deroule(1,100);" onmouseout="deroule(1,20);">Passez la souris ici pour voir le résultat
   </div>
   <div id="texte1" style="float: left;">Texte1 /*Remplacez par le texte de la première zone*/
   </div>
</div>
<div id="zone2" style="width: 100%; height: 20px; background: White; border: 1px solid DimGrey; transition: height 1s; -moz-transition: height 1s;-webkit-transition: height 1s;-o-transition: height 1s; overflow: hidden;">
   <div id="bandeau2" style="height: 20px; width: 100%; font-size: medium; color: white; background-color: darkgrey;" onmouseover="deroule(2,350);" onmouseout="deroule(2,20);">Un peu d'Explications
   </div>
   <div id="texte2" style="float: left;">Texte2/*Remplacez par le texte de la deuxième zone*/
   </div>
</div>

« Faire un Tooltip évoluéUn nouveau blog. »
<br />
Commentaires
14

Loïcia~

Lundi 12 Octobre 2015 à 19:34
Merci du partage! ^^
Répondre
13

sonia84

Vendredi 27 Juin 2014 à 22:32
Bonsoir, Votre code ne fonctionne pas. J'essaye de modifier mais il me met que le code n'est pas bon. Je ne comprend pas.

Sonia84
Répondre
12

♥ Meloddy

Dimanche 15 Juin 2014 à 19:21
Merci pour tous ces conseils!
Répondre
11

Camychou

Mardi 22 Octobre 2013 à 13:13
C'est un super CSS mais peut-on le faire pour nos les liens des rubrique
Répondre
10

Myhana

Lundi 10 Juin 2013 à 15:12
coucou Papasti ,puis je savoir si vraiment il n y a aucun moyen avec IE pour la boite déroulante ,est ce que ça s appelle un spoiler aussi?j en aurai besoin pour mon blog mais comment faire pour les visiteurs qui n utilisent qu IE,c est bien dommage ,merci Papasti si tu peux m informer ,bonne journée
Répondre
9

nanipeinture

Vendredi 31 Mai 2013 à 18:30
C'est super de savoir faire tout cela. !!!
Répondre
8

Papasti

Mercredi 23 Janvier 2013 à 17:09
Tu peux par exemple remplacer dans le code onmouseover par onclick

Comme son nom l'indique, il sera alors nécessaire de cliquer pour la refermer
Répondre
7

Elfeddy

Mercredi 23 Janvier 2013 à 16:49
Comment fait-on pour que la boite reste ouverte même quand la souris n'est plus sur le titre ?
Répondre
6

Elfeddy

Dimanche 14 Octobre 2012 à 11:12
comment on fait pour mettre un image dedans ?
Répondre
5

dechap

Jeudi 23 Août 2012 à 21:17
trop beau ce tuto c'est des chose comme ça que j'ai besoin pour mon blog! sa serai sympa si tu fais se tuto en video
Répondre
4

Papasti

Vendredi 6 Janvier 2012 à 08:35
Avec un peu de retard :(
Bien sur Tantan tu peux. Ce n'est qu'un peu de CSS :)
Répondre
3

Julie Pietri

Jeudi 5 Janvier 2012 à 23:04
C'est génioal, ça! je n'avais jamais vu ça auparavant!
Répondre
2

Christian Martins

Vendredi 2 Décembre 2011 à 16:42
Très bonne idée !
Je peux prendre pour mon blog ? :o
Répondre
1

Chouffa62

Dimanche 23 Octobre 2011 à 14:33
Bonjour oui l'idée et bien mais faut savoir faire une autre question que j'ai posée aux forum aide et réponse attente donc aurais tu une idée pour lescoms car ma page bievenue et pleine d'images et de coms qu'il n'y a plus de plce et les derniers coms sont mélangés dans lesuns aux autres comment faire?merci si tu peut me répondre.chouffa62 et bon dimanche.

Amitiées
Répondre
Suivre le flux RSS des commentaires

Vous devez être connecté pour commenter

Tuto: Une Boite déroulante en CSS3 + Javascript

Commentaires