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.


  • Poster un nouveau sujet
  • Répondre au sujet

[HTML & CSS3] Un Déroulant Fluide

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 */
  -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

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 */
  -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -moz-transition: 1s all; /* Transition et ses compatibilités */
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -ms-transition: 1s all;
  -khtml-transition: 1s all;
  transition: 1s all;
}

Plaçons également les propriétés CSS dans .Deroulant:hover
Code:
.Deroulant:hover
{
  width: 300px;
  -moz-transition: 1s all; /* Transition et ses compatibilités */
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -ms-transition: 1s all;
  -khtml-transition: 1s all;
  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 */
  -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -moz-transition: 1s all; /* Transition et ses compatibilités */
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -ms-transition: 1s all;
  -khtml-transition: 1s all;
  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 */
  -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

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 */
  -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -moz-transition: 1s all; /* Transition et ses compatibilités */
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -ms-transition: 1s all;
  -khtml-transition: 1s all;
  transition: 1s all;

Plaçons également les propriétés CSS dans .Deroulant:hover
Code:
.Deroulant:hover
{
  height: 150px;
  width: 300px; /* On change également la largeur parce qu'on aime bien */
  -moz-transition: 1s all; /* Transition et ses compatibilités */
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -ms-transition: 1s all;
  -khtml-transition: 1s all;
  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 */
  -moz-border-radius: 10px; /* Arrondis et ses compatibilités */
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  -moz-transition: 1s all; /* Transition et ses compatibilités */
  -webkit-transition: 1s all;
  -o-transition: 1s all;
  -ms-transition: 1s all;
  -khtml-transition: 1s all;
  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
Nymeria.
FémininAge : 22Messages : 296

le Ven 27 Mai 2016 - 15:52

Ah c'est super ça, merci beaucoup :3
avatar
Psychotic Bitch
FémininAge : 30Messages : 31

le Dim 29 Mai 2016 - 2:14

Merci beaucoup **
avatar
Nely Suglisse
FémininAge : 22Messages : 66

le Lun 30 Mai 2016 - 22:14

Merci à toi, c'est pile ce qu'il me fallait ! :hudada:
avatar
Tink ♥
FémininAge : 24Messages : 46

le Mer 15 Juin 2016 - 19:39

Un p'tit merci :)
avatar
Donquichotte
MasculinAge : 21Messages : 48

le Mer 29 Juin 2016 - 9:18

merci
avatar
Applauze
MasculinAge : 27Messages : 163

le Lun 4 Juil 2016 - 11:56

Merci
avatar
.Lucifer.
MasculinAge : 43Messages : 150

le Jeu 11 Aoû 2016 - 20:35

merci beaucoup



avatar
Djeina
FémininAge : 20Messages : 233

le Ven 12 Aoû 2016 - 6:16

Merci du partage ^^
avatar
Ombinou
FémininAge : 22Messages : 104

le Mer 17 Aoû 2016 - 1:01

Merci beaucoup c'est super sympa comme effet.
avatar
Yam'
FémininAge : 23Messages : 73

le Mer 24 Aoû 2016 - 4:43

merci beaucoup! :)
avatar
Inamio
FémininAge : 24Messages : 214

le Sam 10 Sep 2016 - 21:32

Merci



avatar
AlexeB
FémininAge : 21Messages : 157

le Ven 23 Sep 2016 - 5:50

C'est exactement ce que je recherchais.. merci!
avatar
Kanra
FémininAge : 16Messages : 113

le Dim 9 Oct 2016 - 12:16

merci!
avatar
Wolf Valley
FémininAge : 17Messages : 67

le Lun 17 Oct 2016 - 20:43

Merci!
avatar
Luune
FémininAge : 28Messages : 125

le Dim 27 Nov 2016 - 18:24

Merci
avatar
Opaline
FémininAge : 17Messages : 86

le Mer 28 Déc 2016 - 23:37

Merci !



avatar
Jynnea
FémininAge : 22Messages : 87

le Dim 19 Fév 2017 - 1:37

Merci!
avatar
Amarante
FémininAge : 19Messages : 39

le Mar 28 Fév 2017 - 14:05

merci
avatar
Tanchi
Age : 25Messages : 365

le Jeu 9 Mar 2017 - 18:53

Merci :)



avatar
Onlyo
FémininAge : 19Messages : 14

le Ven 17 Mar 2017 - 20:21

Merchiii !
Contenu sponsorisé

  • Poster un nouveau sujet
  • Répondre au sujet

La date/heure actuelle est Jeu 23 Mar 2017 - 7:17