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 : 29Messages : 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
    Laps~solutE
    Laps~solutE
    FémininAge : 41Messages : 74

    Dim 25 Mar 2012 - 17:32

    Merci beaucoup pour cette astuce cheers



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 Ban_sl10
    Par notre bon Captain, merci *-* .
    Bloc flottant ouvrant "au survol" (CSS) - Page 8 0712270256061917640
    Mizukishuu
    Mizukishuu
    FémininAge : 25Messages : 6

    Lun 26 Mar 2012 - 17:45

    Merci ! ^^



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 Crea_412
    avatar
    KanyeWest
    MasculinAge : 33Messages : 137

    Lun 26 Mar 2012 - 19:01

    Merci beaucoup !
    Togira Ikonoka
    Togira Ikonoka
    MasculinAge : 25Messages : 132

    Lun 26 Mar 2012 - 23:54

    Merci, je pense que ça va m'être utile :)



    Lamia
    Lamia
    FémininAge : 28Messages : 154

    Sam 31 Mar 2012 - 13:29

    merci
    Kana-Chii
    Kana-Chii
    FémininAge : 26Messages : 40

    Sam 31 Mar 2012 - 15:59

    Merci beaucoup 8D, sa va beaucoup m'aider, je cherche sa depuis très longtemps!



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 2z7g2d10
    Elphemeria
    Elphemeria
    FémininAge : 30Messages : 17

    Sam 31 Mar 2012 - 17:04

    Merci ^-^
    Hiro
    Hiro
    MasculinAge : 40Messages : 131

    Dim 1 Avr 2012 - 17:43

    merci!



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 Ep44874ipiccy
    Bloc flottant ouvrant "au survol" (CSS) - Page 8 Sansrehl
    Kawel
    Kawel
    MasculinAge : 31Messages : 203

    Dim 1 Avr 2012 - 17:48

    Thanks Very Happy



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 Dream10
    Kawel
    Kawel
    MasculinAge : 31Messages : 203

    Dim 1 Avr 2012 - 18:30

    Je sais que ça peut paraitre idiot mais je suis une bille en codage :l
    Le code html je dois le placer où si je veux qu'il apparaisse sur le bord de toutes mes pages ?
    Merci a qui me répondra Wink



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 Dream10
    Kisuke.U
    Kisuke.U
    MasculinAge : 27Messages : 66

    Dim 1 Avr 2012 - 21:06

    Thanks Razz



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 649969Laggron2
    miss69
    miss69
    FémininAge : 41Messages : 40

    Lun 2 Avr 2012 - 2:31

    Oh mon dieu, c'était ce que je cherchais depuis le début. Merci beaucoup ! :love:
    Naemesys
    Naemesys
    FémininAge : 30Messages : 314

    Mar 3 Avr 2012 - 1:03

    en plein ce que je cherchais ô_o
    Merci Tak :3

    Edite: Finalement ça ne me dis toujours pas comment faire ce que je voulais, c'est à dire l'onglet que tu donne en exemple à gauche de ton forum... m'enfin.





    celianvdb
    celianvdb
    MasculinAge : 24Messages : 28

    Mer 4 Avr 2012 - 13:23

    merci
    Nikos
    Nikos
    MasculinAge : 32Messages : 81

    Mer 4 Avr 2012 - 16:36

    Ca pourrait me servir pour ce que je cherche à faire.
    Merci :)



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 Signatxux
    Tamaki
    Tamaki
    MasculinAge : 31Messages : 7

    Ven 6 Avr 2012 - 22:06

    Merci !
    Erebe
    Erebe
    FémininAge : 31Messages : 25

    Sam 7 Avr 2012 - 2:39

    Merci !
    Sheelal
    Sheelal
    MasculinAge : 31Messages : 30

    Sam 7 Avr 2012 - 4:25

    Merci



    Bloc flottant ouvrant "au survol" (CSS) - Page 8 Sheela17
    cosmos-chann
    cosmos-chann
    FémininAge : 27Messages : 115

    Sam 7 Avr 2012 - 13:59

    merci mais juste ou on le met ? le code dans quel partie pour que sa s'affiche correctement ?
    Aaronid
    Aaronid
    FémininAge : 38Messages : 5

    Sam 7 Avr 2012 - 15:57

    Merci beaucoup pour ce code ^^ Ca fait un moment que je le cherche ><
    Nut'
    Nut'
    FémininAge : 24Messages : 37

    Sam 7 Avr 2012 - 16:16

    Merci



    C'est ballot, j'ai pas de signa' q: Juste pour vous énervé tiens !
    Pauline008
    Pauline008
    FémininAge : 26Messages : 3

    Sam 7 Avr 2012 - 17:10

    Merci :)
    Jaekwang
    Jaekwang
    MasculinAge : 30Messages : 27

    Dim 8 Avr 2012 - 17:14

    Merci ! Exactement ce que je cherchais *o*
    Blast Kiss
    Blast Kiss
    FémininAge : 33Messages : 32

    Dim 8 Avr 2012 - 17:17

    Ce tuto est super, merci ♥



    Under Co.
    Corkyie
    Corkyie
    FémininAge : 26Messages : 75

    Lun 9 Avr 2012 - 0:11

    Oouah ! C'est exacteent ce que je cherchais, merci beaucoup !

    Cependant, j'ai une question toute bête (eh oui, je suis vraiment nulle en codage ^^)

    Où doit-on mettre le code HTML pour que la boite de mette au même endroit que sur ton forum test ?

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Ven 1 Nov 2024 - 9:15