Animations au survol - Boutons déroulants

→ Des boutons qui se déploient lors du survol de la souris pour y placer des informations supplémentaires.

Plus d'informations...

Ce bandeau déroulant qui se déploie peut contenir des informations supplémentaires.

Il peut contenir des images :

wallet.png

Et des liens évidemment (encore un site de Vincent De Oliveira) !

De plus, ce bandeau s'adapte automatiquement en hauteur à son contenu.

On peut très facilement gérer son contenu directement dans l'éditeur de texte d'adHoc !

Encore Plus...

Et on peut dans le code source personnaliser un peu ce bandeau déroulant.

Notamment, pour sa couleur de fond (avec éventuellement des transparences, des dégradés).

C'est une adaptation possible du tutoriel (deux articles) sur 71site.fr. J'ai essayé de le rendre compatible avec un affichage sur mobile. Testez son affichage sur mobile.

Il y a 3 boutons distincts (A, B et C) dont les dimensions s'adapteront à l'affichage à l'aide de règles media queries ainsi que des unités proportionnelles vw ( Information trouvée ici ).

Les règles de style sont dans la partie [style type="text/css"]...[/style]

Elle peut être directement, encadrée de ces balises au début du code source de la page ou de la boîte ou dans un fichier de style additionnel comme c'est le cas ici

Voir son contenu ci dessous :


#boite_deploiementA, #boite_deploiementB, #boite_deploiementC { /*bouton à déployer*/
	width:22vw; /*largeur : ici en valeur fixe mais proportionnelle*/
	height:60px; /*hauteur*/
	margin:0 auto;
}
#boite_deploiementA h5, #boite_deploiementB h5, #boite_deploiementC h5 { /*attributs des titres des boutons*/
	position:relative;
	height:60px; /*hauteur*/
	z-index:2; /* z-index supérieur superposant leur bandeau déroulant */
	font-weight:bold; /* ou normal */
	font-size:1.5vw; /*taille du texte : unité proportionnelle*/
	border:1px dotted #555555; /*bordure du bouton : épaisseur, nature, couleur*/
	background: #888888; /*couleur de fond*/
	border-radius:0px; /*arrondis*/
}
#boite_deploiementA h5 a, #boite_deploiementB h5 a, #boite_deploiementC h5 a { /*attributs des liens sur les boutons*/
	display:block;
	padding:12px; /*marges intérieures des boutons*/
	text-align:left; /*alignement du texte : left center right*/
	color:#444444; /*couleur du texte*/
	text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiementA h5 a:hover, #boite_deploiementB h5 a:hover, #boite_deploiementC h5 a:hover { /*attributs des liens survolés sur les boutons*/
	color:#000000; /*couleur du texte au survol*/
}
.deploiement { /*Bouton et Bandeau déroulant*/
	width:100%;
	height:1px; /*IMPORTANT*/
	float:left;
	margin:0 0; /*marges extérieures des boutons et bandeaux déroulants*/
}

.deploiement div { /*Attributs du Bandeau déroulant*/
	position:relative;
	z-index:1; /* z-index inférieur à celui de leur bouton */
	background:#000000; /*couleur du fond*/
	padding:10px; /*marges intérieures du bandeau déroulant*/
	margin-top:-5px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
	font-size:.9em; /*taille du texte*/
	color:#eeeeee; /*couleur du texte*/
	border-radius:0px 0px 8px 8px; /*arrondis du bandeau déroulant, ici seulement en bas*/
	transform:scaleY(0); /*échelle 0 : donc non visible*/
	transform-origin:50% 0; /*déroulement au milieu à partir du haut*/
	transition:all 0.5s ease; /*vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
.deploiement:hover div { /*Attributs du bandeau déroulant au survol du bouton ou du bandeau*/
	transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement div p, .deploiement div p a, .deploiement div p a:hover { /*IMPORTANT : ne pas modifier*/
	background:transparent;
	padding:0;
}
@media screen and (max-width: 760px), screen and (max-device-width: 760px) { /* inférieur à 760px de largeur (MOBILE) */
#boite_deploiementA, #boite_deploiementB, #boite_deploiementC { /*bouton à déployer*/
	width:90vw; /*largeur : ici en valeur fixe mais proportionnelle pour occuper presque toute la colonne*/
	height:60px; /*hauteur*/
	margin:0 auto;
}
#boite_deploiementA h5, #boite_deploiementB h5, #boite_deploiementC h5 { /*attributs des titres des boutons*/
	font-size:6vw; /*taille du texte : unité proportionnelle*/
}
#boite_deploiementA h5 { /*attributs des titres des boutons*/
	z-index:6; /* z-index ordonné de haut en bas */
}
#boite_deploiementA .deploiement div { /*Attributs du Bandeau déroulant*/
	z-index:5; /* z-index ordonné de haut en bas */
}
#boite_deploiementB h5 { /*attributs des titres des boutons*/
	z-index:4; /* z-index ordonné de haut en bas */
}
#boite_deploiementB .deploiement div { /*Attributs du Bandeau déroulant*/
	z-index:3; /* z-index ordonné de haut en bas */
}
#boite_deploiementC h5 { /*attributs des titres des boutons*/
	z-index:2; /* z-index ordonné de haut en bas */
}
#boite_deploiementC .deploiement div { /*Attributs du Bandeau déroulant*/
	z-index:1; /* z-index ordonné de haut en bas */
}
} /* fin dispositions max-width: 760px */

Chaque bouton possède sa propre id #boite_deploiementA  #boite_deploiementB  #boite_deploiementC mais les règles sont les mêmes...  La différenciation est pour les écrans inférieurs à 760px (à adapter...) pour lesquels chaque bouton, alignés verticalement et non plus en ligne, occupe presque la totalité de la largeur de l'écran et les z-index (indices de superposition) sont ordonnés de haut en bas afin que les boutons recouvrent leur bandeau et que les bandeaux apparaissent tous au clic (pas de notion de survol sur les mobiles, évidemment).

J'ai nommé ce fichier animsurvol_boutons_deroulants.css : Il est placé dans le dossier css des skins et son appel au début du code source est le suivant :


    <link charset="utf-8" href="skin/css/animsurvol_boutons_deroulants.css" rel="stylesheet" />    

Et enfin, ce type de code là où vous souhaitez placer les boutons :


<div style="display: inline-block;">
<div id="boite_deploiementA">
<div class="deploiement">
<h5><a>Origine</a></h5><!-- titre bouton -->
<div><!-- contenu -->
<p>Vincent De Oliveira</p>
<p><a href="http://iamvdo.me" target="_blank">http://iamvdo.me</a></p>
<p><a href="http://www.css3create.com" target="_blank">http://www.css3create.com</a></p>
</div><!-- fin contenu -->
</div><!-- fin deploiement -->
</div><!-- fin boite_deploiementA -->
</div><!-- fin inline-block-A -->

<div style="display: inline-block;">
<div id="boite_deploiementB">
<div class="deploiement">
<h5><a>Plus d'informations...</a></h5><!-- titre bouton -->
<div><!-- contenu -->
<p>Ce bandeau déroulant qui se déploie peut contenir des informations supplémentaires.</p>
<p>Il peut contenir des images :</p>
<p style="text-align:center;"><img alt="wallet.png" src="images/tutoriels/imagettes/wallet.png" style="height: 80px; width: 80px;" /></p>
<p>Et <a href="http://pleeease.io/" target="_blank">des liens</a> évidemment (encore un site de Vincent De Oliveira) !</p>
<p>De plus, ce bandeau s'adapte automatiquement en hauteur à son contenu.</p>
<p>On peut très facilement gérer son contenu directement dans l'éditeur de texte d'adHoc !</p>
</div><!-- fin contenu -->
</div><!-- fin deploiement -->
</div><!-- fin boite_deploiementB -->
</div><!-- fin inline-block-B -->

<div style="display: inline-block;">
<div id="boite_deploiementC">
<div class="deploiement">
<h5><a>Encore Plus...</a></h5><!-- titre bouton -->
<div style="background:linear-gradient(#006AD5, #004080)"><!-- contenu -->
<p>Et on peut dans le code source personnaliser un peu ce bandeau déroulant.</p>
<p>Notamment, pour sa couleur de fond (avec éventuellement des transparences, des dégradés).</p>
</div><!-- fin contenu -->
</div><!-- fin deploiement -->
</div><!-- fin boite_deploiementC -->
</div><!-- fin inline-block-C -->

NB : Il est facile, dans l'éditeur de texte de placer des images, des textes, des liens comme à votre habitude.

NB : Les parties du type [div style="display: inline-block;"]...[/div][!-- fin inline-block-X --] servent à placer les boutons dans le flux. Elles sont importantes pour les placer en ligne...

L'origine de cette petite recherche dont l'auteur est Vincent De Oliveira est sur le site css3create.com.

Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.