• Tuto: Une Boite déroulante en CSS3 + Javascript

    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&eacute;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. »

  • Commentaires

    15
    Lundi 12 Octobre 2015 à 19:34

    Merci du partage! ^^

    14
    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

    13
    Dimanche 15 Juin 2014 à 19:21

    Merci pour tous ces conseils!

    12
    Mardi 22 Octobre 2013 à 13:13

    C'est un super CSS mais peut-on le faire pour nos les liens des rubrique

    11
    Meraviglia Profil de Meraviglia
    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

    10
    Vendredi 31 Mai 2013 à 18:30

    C'est super de savoir faire tout cela. !!!

    9
    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

    8
    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 ?

    7
    Dimanche 14 Octobre 2012 à 11:12

    comment on fait pour mettre un image dedans ?

    6
    dechap Profil de 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

    5
    Samedi 25 Février 2012 à 22:08
    Comment on fait pour qu'il soit incliné?
    Pour que ça coulisse vers la droite par exemple ...
    4
    Vendredi 6 Janvier 2012 à 08:35
    Avec un peu de retard :(
    Bien sur Tantan tu peux. Ce n'est qu'un peu de CSS :)
    3
    Ploum Tagada Profil de Ploum Tagada
    Jeudi 5 Janvier 2012 à 23:04

    C'est génioal, ça! je n'avais jamais vu ça auparavant!

    2
    Vendredi 2 Décembre 2011 à 16:42

    Très bonne idée !
    Je peux prendre pour mon blog ? :o

    1
    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

    Suivre le flux RSS des commentaires

    Vous devez être connecté pour commenter