Bloc flottant ouvrant "au survol" (CSS)

• Partie HTML
  
• Déroulant Horizontal
  
• Déroulant Vertical
  

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.

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.



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 ^^ ?



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 !

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;
}

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 ^^ ?


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 !

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;

• Partie HTML
  
• Déroulant Horizontal
  
• Déroulant Vertical