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)

    Taktiik
    Taktiik
    MasculinAge : 24Messages : 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 */
      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
    Karmixi
    Karmixi
    FémininAge : 23Messages : 61

    le Dim 19 Aoû 2012 - 20:30

    Merci
    QytyQuild
    QytyQuild
    MasculinAge : 21Messages : 57

    le Lun 20 Aoû 2012 - 19:06

    J'adore merci !



    Comme je disais, y a des fois où c'était dingue dans le quartier, on savait jamais ce qui pouvait arriver, ni quand. J'en avais trop fait pour faire machine arrière et j'en avais trop fait pour continuer comme ça. Faut croire que les évènements gagnent toujours le pas sur vous. Un jour mon grand père ma demandé si je tenais à vivre, oui j'y tiens mais maintenant il est trop tard ...
    luangue
    luangue
    MasculinAge : 31Messages : 34

    le Mar 21 Aoû 2012 - 14:21

    merci



    Bloc flottant ouvrant "au survol" (CSS) - Page 12 Bglulu10
    Akiki
    Akiki
    FémininAge : 21Messages : 24

    le Mar 21 Aoû 2012 - 16:42

    Merci !
    SugarBuse
    SugarBuse
    FémininAge : 21Messages : 43

    le Jeu 23 Aoû 2012 - 15:08

    Merci !
    Daiunme
    Daiunme
    FémininAge : 30Messages : 42

    le Dim 26 Aoû 2012 - 14:02

    merci, j'adore cet effet :friends:



    Bloc flottant ouvrant "au survol" (CSS) - Page 12 Tumblr_lw48n9I5Pb1qcheado2_250
    Mizora
    Mizora
    FémininAge : 21Messages : 6

    le Dim 26 Aoû 2012 - 17:20

    Merci ♥
    Eil'liathan Tyan'Lirulin
    Eil'liathan Tyan'Lirulin
    FémininAge : 28Messages : 315

    le Lun 27 Aoû 2012 - 21:35

    merci ^^
    Zarwins
    Zarwins
    FémininAge : 23Messages : 155

    le Mer 29 Aoû 2012 - 6:25

    Un gros merci a toi =3
    Je cherchais ça depuis un moment x)



    Bloc flottant ouvrant "au survol" (CSS) - Page 12 121217030106243656
    Candy Libertine
    Candy Libertine
    FémininAge : 21Messages : 136

    le Mer 29 Aoû 2012 - 12:34

    merci !
    Alaynna
    Alaynna
    FémininAge : 26Messages : 74

    le Jeu 30 Aoû 2012 - 21:56

    Je veux essayer *-*



    -- If we don't have the key we can't open we can't open whatever it is, we don't have, that it unlocks, so what purpose would be served in finding whatever need be unlocked, which we don't have, without first having found the key that unlocks it?
    -- So we're going after this key?
    -- You're not making any sense at all.
    Lizee
    Lizee
    FémininAge : 22Messages : 32

    le Ven 7 Sep 2012 - 16:27

    Merci!!!



    Bloc flottant ouvrant "au survol" (CSS) - Page 12 0fca20ea7a9331c2f7df77817e5774c1-d4jt6bw
    Shatters
    Shatters
    FémininAge : 25Messages : 57

    le Dim 9 Sep 2012 - 1:09

    Classe ! Merci ! Very Happy



    J'ai appelé les bourreaux pour, en périssant, mordre la crosse de leurs fusils. J'ai appelé les fléaux, pour m'étouffer avec le sable, avec le sang. Le malheur a été mon dieu. Je me suis allongé dans la boue. Je me suis séché à l'air du crime. Et j'ai joué de bons tours à la folie. (Rimbaud)
    Jabberwock Elyra
    Jabberwock Elyra
    MasculinAge : 25Messages : 44

    le Sam 15 Sep 2012 - 14:53

    Merci♥
    Sarah W.
    Sarah W.
    FémininAge : 20Messages : 35

    le Sam 22 Sep 2012 - 22:14

    Ca fais longtemps que je cherche comment faire , merci beaucoup ! ♥

    EDIT: Comment je fais pour le mettre comme sur ton forum test ? x) (J'suis nulle pas la peine de me le rappeler) Merci d'avance .
    cerizz
    cerizz
    FémininAge : 26Messages : 45

    le Jeu 27 Sep 2012 - 19:25

    Merci
    Plume'
    Plume'
    FémininAge : 21Messages : 166

    le Dim 30 Sep 2012 - 15:54

    Merci !
    Xibition
    Xibition
    FémininAge : 24Messages : 88

    le Sam 20 Oct 2012 - 22:40

    Merci beaucoup !!



    Bloc flottant ouvrant "au survol" (CSS) - Page 12 Signature_let__s_get_naked_by_xibition-d59s8ht
    My deviantart.
    Sacha Chan
    Sacha Chan
    FémininAge : 20Messages : 21

    le Dim 21 Oct 2012 - 13:37

    Merci du partage Very Happy
    Angelusia
    Angelusia
    FémininAge : 34Messages : 1159

    le Sam 27 Oct 2012 - 16:09

    Merci pour le tuto qui me sera fort utile : )
    Wapitite
    Wapitite
    FémininAge : 30Messages : 10

    le Sam 27 Oct 2012 - 20:17

    Je suis curieuse. Merci! =)
    Derek Lafleur
    Derek Lafleur
    MasculinAge : 43Messages : 30

    le Sam 27 Oct 2012 - 20:38

    yeah !

    ça m'interresse merci à toi (hate de voir ça)

    ham1
    AmelieSoSo
    AmelieSoSo
    FémininAge : 21Messages : 6

    le Sam 27 Oct 2012 - 23:56

    THX THX o// :hug2:



    Bloc flottant ouvrant "au survol" (CSS) - Page 12 595755Sanstitre2
    sébastien
    sébastien
    MasculinAge : 36Messages : 642

    le Dim 28 Oct 2012 - 14:12

    merci



    Bloc flottant ouvrant "au survol" (CSS) - Page 12 Signat10
    Aurore13
    Aurore13
    FémininAge : 30Messages : 48

    le Lun 29 Oct 2012 - 14:31

    Merci pour ce tuto qui semble fort intéressant :)
    Contenu sponsorisé


      La date/heure actuelle est Mar 23 Juil 2019 - 13:45