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.


    Bloc flottant ouvrant "au survol" (CSS)

    Partagez
    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Dim 20 Nov 2011 - 2:37



    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 */
      border-radius: 10px; /*Arrondi les coins*/
    }


    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 */
      border-radius: 10px; /*Arrondi les coins*/
      -webkit-transition: 1s all; /* Transition et ses compatibilités */
      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 */
      border-radius: 10px; /*Arrondi les coins*/
      -webkit-transition: 1s all; /* Transition et ses compatibilités */
      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 */
      border-radius: 10px; /*Arrondi les coins*/
    }

    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 */
      border-radius: 10px; /*Arrondi les coins*/
      -webkit-transition: 1s all; /* Transition et ses compatibilités */
      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 */
      border-radius: 10px; /*Arrondi les coins*/
      -webkit-transition: 1s all; /*Transition et ses comptabilités*/
      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
    Tsumei
    MasculinAge : 26Messages : 116

    le Dim 20 Nov 2011 - 11:31

    Merci ! Very Happy
    [First oh yeah ! Cool]
    avatar
    Soul
    MasculinAge : 21Messages : 1723

    le Dim 20 Nov 2011 - 11:36

    Ho cool ! Merci à toi, je suis pressé de voir le tuto Very Happy
    avatar
    Vador
    MasculinAge : 16Messages : 63

    le Dim 20 Nov 2011 - 11:58

    Je veux voir

    avatar
    vodkaspazz
    FémininAge : 25Messages : 40

    le Dim 20 Nov 2011 - 12:22

    Merci d'avance pour ce tuto ♥
    avatar
    Ziktaon
    MasculinAge : 24Messages : 843

    le Dim 20 Nov 2011 - 12:33

    Yo j'attendais ca depuis hier soir Wink Merci a toi .






    ‘ Le codage est la logique, Le graphisme est le savoir faire ‘

    avatar
    Tsumei
    MasculinAge : 26Messages : 116

    le Dim 20 Nov 2011 - 14:07

    J'ai tout de même une question, pour ce super tuto'.

    J'aimerais savoir s'il est possible de faire un panneau qui s'adapte au texte inséré ? Histoire de pas devoir mettre tout le temps la même hauteur pour des panneaux qui contiendraient plus ou moins de choses. ^^

    Merci encore l'ami ! Wink
    avatar
    Origami
    MasculinAge : 22Messages : 22

    le Dim 20 Nov 2011 - 14:15

    j'aimerai vraiment voir ce tutoriel
    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Dim 20 Nov 2011 - 14:21

    Tsumei> En effet, ça aurait été bien d'avoir un panneau ajustable automatiquement, cependant, si tu mets la valeur auto; le déroulant n'est plus fluide et les propriétés CSS3 deviennent inutiles ^^".

    Du coup, c'est dur et surtout embêtant mais faut recréer une déroulant un chaque fois :s

    Cordialement~~
    Taktiik.

    avatar
    Tsumei
    MasculinAge : 26Messages : 116

    le Dim 20 Nov 2011 - 14:23

    D'accord, merci pour cette précision !
    avatar
    Bang
    MasculinAge : 21Messages : 2434

    le Dim 20 Nov 2011 - 14:31

    Merci pour l'astuce !
    Par contre (ouais je sais je suis chiant Razz) e serait bien de mettre un exemple, un lien vers une image avant/après histoire de voir ce que ça donne ^^






    OHANA
    avatar
    Jin'Rai
    MasculinAge : 22Messages : 171

    le Dim 20 Nov 2011 - 14:32

    Merci Very Happy
    Hâte de voir ce que cela donne :)
    avatar
    Taktiik
    MasculinAge : 22Messages : 2291

    le Dim 20 Nov 2011 - 14:47

    Bang> Pas idiot, j'ajoute cela en rentrant ;D

    Tsumei> Pas de quoi Wink

    Je le redis, n'hésitez pas à poser des questions =)

    Taktiik.

    avatar
    Pheles
    MasculinAge : 25Messages : 7

    le Dim 20 Nov 2011 - 15:20

    Oh, merci, je cherche ça depuis... longtemps ! Voyons ce que ça donne.
    avatar
    Jimmy
    MasculinAge : 22Messages : 166

    le Dim 20 Nov 2011 - 15:32

    merci
    avatar
    Milkiniz
    FémininAge : 23Messages : 69

    le Dim 20 Nov 2011 - 16:31

    Je suis curieuse =°
    avatar
    LittleThing
    FémininAge : 22Messages : 6

    le Dim 20 Nov 2011 - 17:51

    Bénie soit la balise Hide xD ! Bon, je poste mon petit merci ! Et si le tuto l'est pas bien, j'édite et je retire mon merci ! Cool *sort* Voilà !
    avatar
    Plopounet
    MasculinAge : 22Messages : 56

    le Dim 20 Nov 2011 - 18:41

    Merci
    avatar
    crum-crum
    FémininAge : 26Messages : 8

    le Dim 20 Nov 2011 - 18:56

    Bonjour !

    Je pense l'utiliser pour la prochaine version du forum ♥

    Merci beaucoup ^^
    avatar
    Bunny Lune
    FémininAge : 27Messages : 134

    le Dim 20 Nov 2011 - 20:22

    Merci beaucoup pour ce tuto
    avatar
    Kagami Tsuki
    MasculinAge : 21Messages : 14

    le Dim 20 Nov 2011 - 20:34

    Merci
    avatar
    Byakuya Kuonki
    MasculinAge : 18Messages : 107

    le Dim 20 Nov 2011 - 20:58

    Merci pour le partage, je veux voir moi ! tongue
    Rina
    FémininAge : 24Messages : 675

    le Lun 21 Nov 2011 - 12:23

    Merci ce tuto est une bonne idée ^^
    avatar
    lapamina
    FémininAge : 97Messages : 42

    le Mer 23 Nov 2011 - 0:56

    J'ai hâte de voir, si c'est bien ce que je cherche...!

    d'autant que le lien de démo semble mort... Wink
    avatar
    Anéa
    FémininAge : 28Messages : 157

    le Jeu 24 Nov 2011 - 1:53

    Merci Taktik !



    Contenu sponsorisé


      La date/heure actuelle est Lun 29 Mai 2017 - 22:46