AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [HTML & CSS3] Un Déroulant Fluide

    Partagez
    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Dim 20 Nov 2011 - 2:37

    Rappel du premier message :

    Un Déroulant Fluide Dernière mise à jour : 29 Avril 2013
    Aperçu
    Préparation
    Détails

    W W W
    Il n'y a pas de préparations particulière à part avoir les yeux grands ouverts et le cerveau prêt à réfléchir Wink !

    Vous pouvez maintenant poursuivre et débuter le tutoriel. Pour toutes questions, n'hésitez pas à m'envoyer un email : taktiik69@gmail.com si j'oublie de répondre, et j'insiste à nouveau :

    Sparrow Style a dit : Quoi qu'il en soit, si vous utilisez ce tutoriel pour personnaliser l'apparence de votre forum, je vous demande de mettre un crédit à Never-Utopia sur votre accueil, de manière lisible cela va de soi, en guise de remerciement pour l'aide que nous vous avons apportée.


    Niveau : Facile
    Fait : 20/11/2011
    Type : Tutoriel


    Voici une astuce simple et pourtant qui peut changer la donne dans l'esthétique de votre forum. Ces déroulants fluides vont vous permettre de cacher des liens en trop ou des informations secondaires ! Nous aborderons, car il est nécessaire, les transitions CSS3 dans ce petit tutoriel.

    Le contenu n'est pas sous balide hide (explications), mais n'hésitez pas à remercier son auteur.


    Navigation



    Partie HTML

    Tout d'abord, pour pouvoir créer cette boite déroulante, nous allons devoir l'introduire à l'aide de balises. Et pas n'importe laquelle, nous allons donc utiliser une div pour faire cela.
    /!\ Attention, ceci peut aussi se faire sur un Tableau ou d'autres élémentsde type "Block" /!\

    On va lui affiler une class qui sera reliée au CSS et que l'on pourra modifier. Appellons cette classe :"Deroulant" ! Si vous avez bien suivis, on a ceci :
    Code:
    <div class="Deroulant"></div>

    En ajoutant du contenu, on peut arriver à :
    Code:
    <div class="Deroulant"><h3>Titre de la boite</h3>
    Le titre va nous permettre de passer la souris pour affichaer ce que l'on veut cacher<br />
    Car nous ... On est des cachotiers °°</div>

    Pour ce qui est du HTML, on a terminé. La partie du CSS est cependant un peu plus consistante.

    Déroulant Horizontal

    Rien de bien difficile en soit !
    Tout d'abord, on va créer notre class dans le CSS, et tout de suite, on va lui affiler une largeur avec width. Pourquoi?
    Car lorsque vous passerez votre souris dans cette zone, la boite dévoilera son contenu. Prenons donc une largeur de 30px :
    Code:
    .Deroulant
    {
      width: 30px;
    }

    Pourtant, la boite a quand même besoin d'une hauteur pour exister. Ainsi, on va lui donner une hauteur :
    Code:
    .Deroulant
    {
      width: 30px;
      height: 150px;
    }

    Maintenant, vous pouvez lui ajouter tout le style que vous voulez, pour ma part, je lui ajoute une couleur de fond (background-color), une bordure (border), un alignement du texte au centre, une barre de défilemnet cachée (overflow: hidden) et des arrondis (border-radius) :
    Code:
    .Deroulant
    {
      overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
      background-color: #dfdfdf; /* Fond Grisé */
      border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
      width: 30px;
      height: 150px;
      text-align: center; /* Alignement du texte au centre */
      -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
      -webkit-border-radius: 10px;
      -o-border-radius: 10px;
      -khtml-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
    }

    Maintenant, comme l'on veut que le contenu s'affiche au passage de la souris on va créer une seconde balise pour .Deroulant qui aura le suffixe :hover
    Hover ? Ca veut dire planer, voltiger, survoler. Simple à retenir non ^^ ?
    /!\ Attention, les valeurs que vous avez déjà mises dans .Deroulant sont automatiquement données au suffixe :hover, vous n'êtes donc pas obligés de les mettre dans .deroulant:hover /!\

    Donnons alors à .Deroulant:hover une largeur de 300px :
    Code:
    .Deroulant:hover
    {
      width: 300px;
    }

    On va ajouter une propriété de CSS3 qui va venir appliquer un effet de transition et créer cette sensation de déroulement fluide !
    /!\ Attention, si vous mettez ces propriétés dans .Deroulant, vous devez les mettre dans .Deroulant:hover pour que le déroulement soit fluide au moment du passage et au moment où la souris est retiée ! Voilà une exception /!\

    Code:
    .Deroulant
    {
      overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
      background-color: #dfdfdf; /* Fond Grisé */
      border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
      width: 30px;
      height: 150px;
      text-align: center; /* Alignement du texte au centre */
      -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
      -webkit-border-radius: 10px;
      -o-border-radius: 10px;
      -khtml-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
      -moz-transition: 1s all; /* Transition et ses compatibilités */
      -webkit-transition: 1s all;
      -o-transition: 1s all;
      -ms-transition: 1s all;
      -khtml-transition: 1s all;
      transition: 1s all;
    }

    Plaçons également les propriétés CSS dans .Deroulant:hover
    Code:
    .Deroulant:hover
    {
      width: 300px;
      -moz-transition: 1s all; /* Transition et ses compatibilités */
      -webkit-transition: 1s all;
      -o-transition: 1s all;
      -ms-transition: 1s all;
      -khtml-transition: 1s all;
      transition: 1s all;
    }

    Validez le CSS et allez admirer le résultat o/ !
    Bon maintenant, si vous voulez faire comme sur l'exemple, vous pouvez placer la boite n'importe où sur votre écran. Ainsi, donnez une position fixée à votre boite (position: fixed;) et donnez lui son décalement par rapport au haut de l'écran et la gauche.
    Code:
    .Deroulant
    {
      position: fixed;
      top: 150px;
      left: 0px;
      overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
      background-color: #dfdfdf; /* Fond Grisé */
      border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
      width: 30px;
      height: 150px;
      text-align: center; /* Alignement du texte au centre */
      -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
      -webkit-border-radius: 10px;
      -o-border-radius: 10px;
      -khtml-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
      -moz-transition: 1s all; /* Transition et ses compatibilités */
      -webkit-transition: 1s all;
      -o-transition: 1s all;
      -ms-transition: 1s all;
      -khtml-transition: 1s all;
      transition: 1s all;
    }

    Déroulant Vertical

    Tout d'abord, on va créer notre class dans le CSS, et tout de suite, on va lui affiler une hauteur avec height. Pourquoi?
    Car lorsque vous passerez votre souris dans cette zone, la boite dévoilera son contenu. Prenons donc une largeur de 30px :
    Code:
    .Deroulant
    {
      height: 30px;
    }

    Pourtant, la boite a quand même besoin d'une hauteur pour exister. Ainsi, on va lui donner une hauteur :
    Code:
    .Deroulant
    {
      height: 30px;
      width: 150px;
    }

    Maintenant, vous pouvez lui ajouter tout le style que vous voulez, pour ma part, je lui ajoute une couleur de fond (background-color), une bordure (border), un alignement du texte au centre, une barre de défilemnet cachée (overflow: hidden) et des arrondis (border-radius) :
    Code:
    .Deroulant
    {
      overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
      background-color: #dfdfdf; /* Fond Grisé */
      border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
      height: 30px;
      width: 150px;
      text-align: center; /* Alignement du texte au centre */
      -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
      -webkit-border-radius: 10px;
      -o-border-radius: 10px;
      -khtml-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
    }

    Maintenant, comme l'on veut que le contenu s'affiche au passage de la souris on va créer une seconde balise pour .Deroulant qui aura le suffixe :hover
    Hover ? Ca veut dire planer, voltiger, survoler. Simple à retenir non ^^ ?
    /!\ Attention, les valeurs que vous avez déjà mises dans .Deroulant sont automatiquement données au suffixe :hover, vous n'êtes donc pas obligés de les mettre dans .deroulant:hover /!\

    Donnons alors à .Deroulant:hover une hauteur de 300px :
    Code:
    .Deroulant:hover
    {
      height: 150px;
    }

    On va ajouter une propriété de CSS3 qui va venir appliquer un effet de transition et créer cette sensation de déroulement fluide !
    /!\ Attention, si vous mettez ces propriétés dans .Deroulant, vous devez les mettre dans .Deroulant:hover pour que le déroulement soit fluide au moment du passage et au moment où la souris est retiée ! Voilà une exception /!\

    Code:
    .Deroulant
    {
      overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
      background-color: #dfdfdf; /* Fond Grisé */
      border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
      height: 30px;
      width: 150px;
      text-align: center; /* Alignement du texte au centre */
      -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
      -webkit-border-radius: 10px;
      -o-border-radius: 10px;
      -khtml-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
      -moz-transition: 1s all; /* Transition et ses compatibilités */
      -webkit-transition: 1s all;
      -o-transition: 1s all;
      -ms-transition: 1s all;
      -khtml-transition: 1s all;
      transition: 1s all;

    Plaçons également les propriétés CSS dans .Deroulant:hover
    Code:
    .Deroulant:hover
    {
      height: 150px;
      width: 300px; /* On change également la largeur parce qu'on aime bien */
      -moz-transition: 1s all; /* Transition et ses compatibilités */
      -webkit-transition: 1s all;
      -o-transition: 1s all;
      -ms-transition: 1s all;
      -khtml-transition: 1s all;
      transition: 1s all;
    }

    Validez le CSS et allez admirer le résultat o/ !

    Bon maintenant, si vous voulez faire comme sur l'exemple, vous pouvez placer la boite n'importe où sur votre écran. Ainsi, donnez une position fixée à votre boite (position: fixed;) et donnez lui son décalement par rapport au haut de l'écran et la gauche.
    Code:
    .Deroulant
    {
      position: fixed;
      top: 0px;
      left: 500px;
      overflow: hidden; /* Cache la barre de défilement, pour l'afficher, mettre en valeur : auto */
      background-color: #dfdfdf; /* Fond Grisé */
      border: 2px solid #cccccc; /* Bordure grisée de 2px sur chaque cotés */
      height: 30px;
      width: 150px;
      text-align: center; /* Alignement du texte au centre */
      -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
      -webkit-border-radius: 10px;
      -o-border-radius: 10px;
      -khtml-border-radius: 10px;
      -ms-border-radius: 10px;
      border-radius: 10px;
      -moz-transition: 1s all; /* Transition et ses compatibilités */
      -webkit-transition: 1s all;
      -o-transition: 1s all;
      -ms-transition: 1s all;
      -khtml-transition: 1s all;
      transition: 1s all;

    Navigation



    Voila ! Very Happy
    J'espère que ce tutoriel vous aidera à comprendre comment l'on peut confectionner un petit déroulant.
    N'hésitez pas à me contacter pour de l'aide,
    Taktiik.


    Dernière édition par Taktiik le Lun 29 Avr 2013 - 18:44, édité 11 fois
    avatar
    kosmiska☼
    MasculinAge : 20Messages : 8

    le Dim 19 Fév 2012 - 11:14

    Merci Very Happy *.*
    avatar
    Sophia
    FémininAge : 22Messages : 43

    le Dim 19 Fév 2012 - 11:31

    Exactement ce que je cherchais ! *o*
    Merci !
    avatar
    Yuuna
    FémininAge : 21Messages : 19

    le Dim 19 Fév 2012 - 15:19

    Merci !
    avatar
    mikalus
    MasculinAge : 46Messages : 92

    le Dim 19 Fév 2012 - 15:31

    Yeeessss, merci..

    Je regrette vraiment pas mon inscription...

    EDIT ; Pourquoi ils sont pas aussi clair à Forumactif ???? :arrh:
    avatar
    Shyn
    FémininAge : 18Messages : 39

    le Dim 19 Fév 2012 - 17:40

    "P'tit merci" :3
    avatar
    Dyesel
    MasculinAge : 26Messages : 14

    le Lun 20 Fév 2012 - 10:34

    @N3m0 a écrit:Oh need =O
    C'est donc là que t'es venue chercher ça, petite futée...
    Idem, need aussi =D

    EDIT : trop bian ♥
    avatar
    jojolabrosse
    MasculinAge : 19Messages : 35

    le Lun 20 Fév 2012 - 14:40

    Merci du partage.J'aime bien comment vous dites vos astuces. C'est une technique anti-robot ?


    EDIT : Es que quel qu'un pourrait me donner le code final car je suis perdu Shocked
    avatar
    mikalus
    MasculinAge : 46Messages : 92

    le Lun 20 Fév 2012 - 16:00

    @jojolabrosse a écrit:...

    EDIT : Es que quel qu'un pourrait me donner le code final car je suis perdu Shocked


    Le dernier !... Wink

    Et en plus ça fonctionne sur le navigateur Opéra...
    avatar
    jojolabrosse
    MasculinAge : 19Messages : 35

    le Lun 20 Fév 2012 - 17:19

    Non enfaite j'ai trouver Mais encore merci
    avatar
    dorinne
    FémininAge : 21Messages : 26

    le Mar 21 Fév 2012 - 15:08

    Yosh très intéressant tout ça **
    Merci beaucoup!

    EDIT: Si l'on veux mettre une boite déroulante comme dans l'exemple, en dessous de l'avatar dans les messages, où faut-il mettre les balise "< div>" ?



    Le jour où tu me demanderas de choisir entre toi et ma vie, je te répondrais ma vie et tu me quitteras sans savoir que ma vie c'est toi.



    Celui qui regarde la vie comme autre chose qu'une illusion qui se détruit elle-même, est est encore prisonnier de la vie.
    avatar
    Etax
    MasculinAge : 19Messages : 159

    le Mar 21 Fév 2012 - 18:27

    Merci pour ce tuto



    avatar
    dorinne
    FémininAge : 21Messages : 26

    le Mer 22 Fév 2012 - 11:24

    Bonjour, j'ai installer un déroulant pour la Chatbox de mon forum, et je me demandais s'il était possible d'afficher ce qui est caché, seulement si l'on clique ?



    Le jour où tu me demanderas de choisir entre toi et ma vie, je te répondrais ma vie et tu me quitteras sans savoir que ma vie c'est toi.



    Celui qui regarde la vie comme autre chose qu'une illusion qui se détruit elle-même, est est encore prisonnier de la vie.
    Stargazer
    FémininAge : 22Messages : 7

    le Jeu 23 Fév 2012 - 1:58

    Merci!
    avatar
    Saia
    FémininAge : 22Messages : 181

    le Jeu 23 Fév 2012 - 3:03

    merci!



    avatar
    Dreamzz
    FémininAge : 23Messages : 30

    le Dim 26 Fév 2012 - 14:59

    Très utile, merci!



    Juliette, oh!
    avatar
    Morphine.
    FémininAge : 26Messages : 40

    le Lun 27 Fév 2012 - 18:04

    J'adore cet effet. Merci.



    avatar
    Nanachu ♥
    FémininAge : 20Messages : 108

    le Ven 2 Mar 2012 - 20:41

    Merchi ! ♥
    avatar
    Aki'
    FémininAge : 20Messages : 250

    le Mer 7 Mar 2012 - 19:13

    Merci bien
    avatar
    Panthémore
    MasculinAge : 25Messages : 43

    le Ven 9 Mar 2012 - 18:05

    Merci beaucoup pour ce tutoriel très utile^^
    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Sam 10 Mar 2012 - 14:41

    Yop !

    Le tutoriel a été mis à jour, n'hésitez pas à le consulter à nouveau.
    Le déroulement Horizontal et Vertical sont enfin expliqués, bonne lecture & pratique !

    Taktiik.

    avatar
    Legamer
    MasculinAge : 18Messages : 14

    le Sam 10 Mar 2012 - 16:34

    Trop bien je voulais avoir ça !

    avatar
    Shakespeare
    FémininAge : 27Messages : 104

    le Sam 10 Mar 2012 - 18:14

      Wouah, le lien vers le forum test m'a fait bavé...Merci beaucoup !
    avatar
    carotte
    FémininAge : 21Messages : 23

    le Sam 10 Mar 2012 - 18:50

    merci!
    avatar
    Sugare*
    FémininAge : 18Messages : 13

    le Dim 11 Mar 2012 - 19:52

    Merci pour le tuto ! ;D



    « Si je devais choisir entre t'aimer ou respirer, j'utiliserai mon dernier souffle pour te dire " Je t'aime " »
    avatar
    Lord-Voldemort-Rpg
    MasculinAge : 23Messages : 12

    le Lun 12 Mar 2012 - 19:39

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Mar 28 Mar 2017 - 23:27