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

    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
    avatar
    Invité

    le Dim 10 Aoû 2014 - 11:05

    Merci !
    avatar
    Amber's
    FémininAge : 17Messages : 155

    le Dim 14 Sep 2014 - 22:07

    Mercii
    avatar
    Sakura Sumeragi
    FémininAge : 27Messages : 62

    le Lun 15 Sep 2014 - 22:38

    merciii
    avatar
    Mr Yo
    MasculinAge : 43Messages : 37

    le Dim 21 Sep 2014 - 11:04

    merci
    avatar
    Iliana
    FémininAge : 21Messages : 96

    le Sam 8 Nov 2014 - 11:59

    Nickel ! J'ai hâte de voir comment faire ça, c'est beaucoup plus sympa qu'un menu qui apparaît simplement au clic ><
    Merci pour le tuto :3



    avatar
    Fangs
    MasculinAge : 100Messages : 91

    le Sam 8 Nov 2014 - 19:02

    Merci beaucoup ! Je vais l'utiliser pour tout autre chose et j'espère que ça va marcher !
    avatar
    Storminder
    MasculinAge : 21Messages : 56

    le Dim 9 Nov 2014 - 20:43

    Pile ce que je cherchais ! Merci !
    avatar
    Xperience
    FémininAge : 21Messages : 156

    le Mar 2 Déc 2014 - 14:24

    merci !



    avatar
    Ouat
    FémininAge : 33Messages : 74

    le Jeu 4 Déc 2014 - 16:35

    Merci pour l'astuce
    avatar
    Natsu892
    MasculinAge : 16Messages : 63

    le Ven 5 Déc 2014 - 12:41

    merci



    avatar
    Nevr0z
    FémininAge : 28Messages : 74

    le Sam 6 Déc 2014 - 18:26

    Merci :)
    avatar
    Ithaque
    FémininAge : 26Messages : 3

    le Mar 9 Déc 2014 - 21:21

    Merci beaucoup, c'est exactement ce que je cherchais ! Very Happy

    Par contre, comment faire si je souhaite utiliser une image comme fond et cadre du menu ? Puis-je tout simplement insérer l'url de l'image dans le CSS ? Sous quelle forme ?

    Et juste une petite remarque pour améliorer le tuto, car je me suis posé la question et j'ai vu que je n'étais pas la seule, de préciser où doit s'ajouter le code HTLM

    Encore merci, pour le reste c'est nickel, très clair étou étou ! ^^
    avatar
    Lessien
    FémininAge : 35Messages : 160

    le Jeu 11 Déc 2014 - 11:46

    Merci !
    avatar
    Depp
    FémininAge : 26Messages : 298

    le Ven 12 Déc 2014 - 14:35

    Merci bien :)



    avatar
    Akiyuki
    MasculinAge : 19Messages : 89

    le Mar 20 Jan 2015 - 2:34

    Merci !
    avatar
    Erza
    FémininAge : 22Messages : 63

    le Dim 15 Fév 2015 - 19:07

    Merci !



    "Un jour je serai la meilleure codeuse
    Je m’entraînerais sans répis
    Je ne serais jamais la Deu'z
    Et je raflerais tous les prix
    Je parcourrai la toile entiere
    Traquant avec espoir
    Le CSS et ses mystères
    Le secret de son pouvoir

    CODEPOWA !
    Je les saurais tous !
    avatar
    Bankara
    FémininAge : 22Messages : 18

    le Dim 15 Fév 2015 - 20:56

    Merci !
    avatar
    Caine Lornan
    MasculinAge : 36Messages : 78

    le Mer 18 Mar 2015 - 21:08

    Merci
    avatar
    Uther
    MasculinAge : 20Messages : 93

    le Jeu 19 Mar 2015 - 2:00

    cheers
    avatar
    Yuki Kaga
    FémininAge : 17Messages : 265

    le Ven 27 Mar 2015 - 23:51

    A big kiss for you little thing ♥
    avatar
    Izaya Orihara
    FémininAge : 16Messages : 105

    le Sam 18 Avr 2015 - 0:06

    Merci pour le partage. ^^
    avatar
    Hylia
    FémininAge : 17Messages : 97

    le Dim 26 Avr 2015 - 11:41

    Mercii!



    avatar
    FreeSpirit
    MasculinAge : 21Messages : 158

    le Ven 1 Mai 2015 - 15:30

    merci Very Happy
    avatar
    Haru Kami-Sama
    FémininAge : 21Messages : 24

    le Sam 2 Mai 2015 - 17:53

    Ca fait des siècles que je cherche ça ! Merci. Very Happy
    avatar
    Prince Of Spades
    MasculinAge : 24Messages : 50

    le Sam 23 Mai 2015 - 6:48

    Merci ! Ça peut être tellement utile ! :3
    Contenu sponsorisé


      La date/heure actuelle est Jeu 19 Oct 2017 - 18:36