AccueilDernières imagesRechercherS'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)

    Taktiik
    Taktiik
    MasculinAge : 30Messages : 2292

    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 */
      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
    Dr. Karlos
    Dr. Karlos
    MasculinAge : 29Messages : 14

    Lun 9 Avr 2012 - 1:39

    Merci! :)
    Lady Doll
    Lady Doll
    FémininAge : 35Messages : 101

    Lun 9 Avr 2012 - 18:41

    merci =D
    Stanislava
    Stanislava
    FémininAge : 29Messages : 102

    Dim 22 Avr 2012 - 9:30

    Merciii~ J'en ai besoin **



    Bloc flottant ouvrant "au survol" (CSS) - Page 9 777748signnu
    Assyn
    Assyn
    FémininAge : 29Messages : 60

    Mar 24 Avr 2012 - 18:24

    Merci beaucoup ça peut être très sympa! Very Happy



    Bloc flottant ouvrant "au survol" (CSS) - Page 9 795525AssynScopy
    Amera
    Amera
    FémininAge : 32Messages : 67

    Mer 25 Avr 2012 - 1:21

    Oh génial merci beaucoup !
    Xplo-Sion
    Xplo-Sion
    FémininAge : 30Messages : 266

    Mer 25 Avr 2012 - 6:14

    Pratique Wink



    Bloc flottant ouvrant "au survol" (CSS) - Page 9 121926034f5e3fbba2a48
    Gangea971
    Gangea971
    MasculinAge : 31Messages : 87

    Mer 25 Avr 2012 - 17:20

    Merci Very Happy, c'est cool
    Saena
    Saena
    FémininAge : 30Messages : 43

    Dim 6 Mai 2012 - 0:36

    Merci, je teste ^^
    Gigie32
    Gigie32
    FémininAge : 34Messages : 104

    Mar 8 Mai 2012 - 18:19

    sympathique ce truc ^^
    merci
    Super Captain
    Super Captain
    MasculinAge : 33Messages : 33

    Jeu 10 Mai 2012 - 11:18

    En voilà une idée interessante! merci :)



    i m j u s t a p a t c h e d u p マトリョシカ! (o`皿′o)♥
    Bloc flottant ouvrant "au survol" (CSS) - Page 9 Tumblr_lmqy8iZxzx1qam1cxo1_500
    Moriarty
    Moriarty
    FémininAge : 29Messages : 85

    Jeu 10 Mai 2012 - 14:17

    Merci ♥
    Lennon
    Lennon
    FémininAge : 28Messages : 14

    Ven 11 Mai 2012 - 20:13

    Merci d'avance !
    Alinoé
    Alinoé
    FémininAge : 32Messages : 35

    Sam 12 Mai 2012 - 0:41

    Merci de partager ce code ! Very Happy
    Leean
    Leean
    FémininAge : 31Messages : 19

    Lun 14 Mai 2012 - 21:34

    Merci ^^
    Onitsuki
    Onitsuki
    FémininAge : 34Messages : 6

    Mar 15 Mai 2012 - 10:29

    Merci ! °3°
    Nanachu ♥
    Nanachu ♥
    FémininAge : 27Messages : 108

    Mar 15 Mai 2012 - 12:11

    Encore un gros merci Tak pour les nouvelles explications, mais j'ai une petite question. Je ne sais pas si on te l'as déjà posé mais... Pour avoir le déroulant en haut, à gauche, comme dans ton exemple, où faut-il mettre les balises HTML ? J'ai essayé partout, mais je n'y suis pas arrivé... Merci d'avance !


    Dernière édition par Nanachu ♥ le Sam 26 Mai 2012 - 14:44, édité 1 fois
    Vine
    Vine
    FémininAge : 35Messages : 9

    Jeu 17 Mai 2012 - 23:15

    Merci pour ce tuto' ! Wink
    Ashouille
    Ashouille
    FémininAge : 34Messages : 47

    Lun 21 Mai 2012 - 16:32

    Merci
    XxjeremixX
    XxjeremixX
    MasculinAge : 28Messages : 74

    Mer 23 Mai 2012 - 21:28

    merci ^^
    NanaLee
    NanaLee
    FémininAge : 33Messages : 21

    Jeu 24 Mai 2012 - 19:17

    Oh merci c'est ce que je cherchais!
    ♦ Mari-Jane
    ♦ Mari-Jane
    FémininAge : 32Messages : 39

    Ven 25 Mai 2012 - 15:00

    Merci beaucoup Very Happy
    LazuliNight
    LazuliNight
    MasculinAge : 30Messages : 52

    Ven 25 Mai 2012 - 20:54

    Merci :)



    Bloc flottant ouvrant "au survol" (CSS) - Page 9 SPtWNU
    Mamec
    Mamec
    FémininAge : 31Messages : 10

    Lun 28 Mai 2012 - 12:38

    Merci beaucoup !
    Domichi
    Domichi
    FémininAge : 31Messages : 30

    Mar 29 Mai 2012 - 19:52

    Merci beaucoup :3
    o~°Passion HELL
    o~°Passion HELL
    FémininAge : 36Messages : 215

    Mer 30 Mai 2012 - 22:48

    Merci beaucoup !



    ....
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 18:29