adHoc.71site.fr

#boutons-deployables {
	position:relative; /* mettre fixed pour fixer */
	z-index:5000; /* facultatif... tout dépend où et comment ce dispositif est installé, mais z-index élevé pour être superposé au reste de la page */
	top:10px; /* position en haut */
	left:0px; /* position à gauche */
}
#boutons-deployables li{ /* Attributs d'une ligne d'un bouton */
	list-style:none;
	height:50px; /* hauteur */
	padding:0px;
	width:50px; /* largeur */
}
#boutons-deployables contenu{ /* Attributs du bandeau non survolé */
	left:50px; /* position à gauche d'où juxtaposé avec son bouton*/
	padding:0px;
	position:absolute;
	opacity:0; /* opacité = 0 donc non visible */
	transform:scale(0); /* échelle 0 : donc non visible */
	transform-origin:0 0; /* déroulement à partir du haut à gauche */
	transition:all 0.7s ease; /* vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
#boutons-deployables div{ /* Attributs du div d'un bouton = idem li ci-dessus */
	height:50px; /* hauteur */
	width:50px; /* largeur */
	display:block;
	position:relative;
}
#boutons-deployables div:hover contenu{ /* Attributs du bandeau survolé */	
	position:relative;
	width:650px; /* largeur  en pixels */
	height:auto; /* hauteur : auto donc s'adapte en hauteur au contenu */
	padding:5px; /* marges intérieures du bandeau */
	display:block;
	border-radius:6px; /* arrondis */
	opacity:1; /* opacité = 1 donc visible */
	transform:scale(1); /*échelle 1 : donc visible*/
 }
#boutons-deployables div:hover contenu h4 { /* Attributs titre du bandeau survolé */
	color: #222222; /* couleur du texte */
	font-size:25px; /* taille police */
	font-weight:bold;
	padding:0 0 5px 30px; /* marges intérieures */
}
#boutons-deployables .Item1 { /* Attributs du bouton 1 non survolé */
	background:url('..\..\images/tutoriels/NavLat/clock2.png')no-repeat;  /* URL de l'image */
	background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#boutons-deployables .Item1:hover { /* Attributs du bouton 1 survolé */
	background:url('..\..\images/tutoriels/NavLat/clock.png')no-repeat; /* URL de l'image */
	background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#boutons-deployables .Item1 contenu { /* Attributs du bandeau 1 */
	background-color:#E1F8FD; /* couleur de fond */
	color:#000000; /* couleur du texte */
	border:2px solid #0E97B5; /* bordure : épaisseur nature couleur */
}
#boutons-deployables .Item2 { /* idem ci-dessus et compléter les autres items */
	background:url('..\..\images/tutoriels/NavLat/layers2.png')no-repeat;
	background-size:48px;
}
#boutons-deployables .Item2:hover {
	background:url('..\..\images/tutoriels/NavLat/layers.png')no-repeat;
	background-size:48px;
}
#boutons-deployables .Item2 contenu {
	background-color:#DEE1E4;
	color:#000000;
	border:2px solid #434951;
}
#boutons-deployables .Item3 {
	background:url('..\..\images/tutoriels/NavLat/creditcard2.png')no-repeat;
	background-size:48px;
}
#boutons-deployables .Item3:hover {
	background:url('..\..\images/tutoriels/NavLat/creditcard.png')no-repeat;
	background-size:48px;
}
#boutons-deployables .Item3 contenu {
	background-color:#EEEEEE;
	color:#000000;
	border:2px solid #A0A0A0;
}
#boutons-deployables .Item4 {
	background:url('..\..\images/tutoriels/NavLat/settings2.png')no-repeat;
	background-size:48px;
}
#boutons-deployables .Item4:hover {
	background:url('..\..\images/tutoriels/NavLat/settings.png')no-repeat;
	background-size:48px;
}
#boutons-deployables .Item4 contenu {
	background-color:#F5E0E0;
	color:#000000;
	border:2px solid #C53D3D;
}
#boutons-deployables .Item5 {
	background:url('..\..\images/tutoriels/NavLat/piechart2.png')no-repeat;
	background-size:48px;
}
#boutons-deployables .Item5:hover {
	background:url('..\..\images/tutoriels/NavLat/piechart.png')no-repeat;
	background-size:48px;
}
#boutons-deployables .Item5 contenu {
	background-color:#E9D9F4;
	color:#000000;
	border:2px solid #762FAC;
}