adHoc.71site.fr

#menu-deployable {
	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 en utilisation mobile */
	top:10px; /* position en haut */
	right:0px; /* position à droite */
}
#menu-deployable li{ /* Attributs d'une ligne d'un bouton */
	list-style:none;
	height:48px; /* hauteur */
	padding:0px;
	width:48px; /* largeur */
}
#menu-deployable bandeau{ /* Attributs du bandeau non survolé */
	right:290px; /* position à droite (=largeur bandeau) : 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: top right; /* déroulement à partir du haut à droite */
	transition:all 0.7s ease; /* vitesse et mode de transition ease, linear, ease-in, ease-out...*/
}
#menu-deployable bouton{ /* Attributs de la zone d'un bouton = idem li ci-dessus */
	height:48px; /* hauteur */
	width:48px; /* largeur */
	display:block;
	position:relative;
}
#menu-deployable bouton:hover bandeau{ /* Attributs du bandeau survolé */
	position:relative;
	width:290px; /* 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*/
}
#menu-deployable .Item { /* Attributs du menu non survolé */
	background:url('images/iconemenu64.png')no-repeat;  /* URL de l'image */
	background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#menu-deployable .Item:hover { /* Attributs du menu survolé */
	background:url('images/iconemenu64h.png')no-repeat; /* URL de l'image */
	background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#menu-deployable .Item bandeau { /* Attributs du bandeau */
	background-color:#444444; /* couleur de fond */
	color:inherit; /* couleur du texte */
	border:2px solid #000000; /* bordure : épaisseur nature couleur */
}

.md-bandeau-menu{ /*attributs du bandeau*/
	width: 100%; /*largeur du bandeau*/
	margin: 10px auto 30px; /*marges extérieures H DG B*/
	text-align: left; /*alignement texte gauche*/
}
.md-bandeau-menu titre { /*attributs des titres-menus*/
	font-family: Verdana, sans-serif; /*police*/
	font-size: 25px; /*taille police*/
	line-height: 40px; /*hauteur ligne*/
	padding-left:10px; /*marge intérieure gauche*/
	color: #C2662E; /*couleur texte*/
}
.md-bandeau-menu label{ /*attributs des titres-catégories*/
	font-family: Verdana, sans-serif; /*police*/
	font-size: 18px; /*taille police*/
	line-height: 28px; /*hauteur ligne*/
	padding: 5px 5px; /*marges intérieures*/
	margin:0px auto 5px; /*marges extérieures H DG B à adapter*/
	position: relative;
	z-index: 20;
	display: block;
	height: 40px; /*hauteur*/
	cursor: pointer;
	color: #3c3c3c; /*couleur texte*/
	background: linear-gradient(#ebebeb 0%,#e1e1e1 100%); /*couleur fond*/
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		1px 0px 0px 0px rgba(255,255,255,0.9) inset,
		0px 2px 2px rgba(0,0,0,0.1); /*ombre portée boite titre*/
}
.md-bandeau-menu label::before { /*pseudo classe image triangle bas avant*/
	content: '▼'; /*contenu*/
	font-size: 18px; /*taille police*/
	color: #C2662E;
	margin-right:5px;
}
.md-bandeau-menu label:hover::before { /*au survol pseudo classe image triangle droite avant*/
	content: '►'; /*contenu*/
}
.md-bandeau-menu input:checked + label::before { /*séléctionné pseudo classe image triangle droite avant*/
	content: '►'; /*contenu*/
	color: #ebebeb;
}
.md-bandeau-menu label:hover{
	background: #ebebeb; /*couleur fond au survol*/
}
.md-bandeau-menu input:checked + label,
.md-bandeau-menu input:checked + label:hover{ /*attributs des titres sélectionnés et au survol*/
	background: linear-gradient(#c0c0c0 0%,#808080 100%); /*couleur fond*/
	color: #ebebeb; /*couleur texte*/
	box-shadow:
		0px 0px 0px 1px rgba(155,155,155,0.3),
		0px 2px 2px rgba(0,0,0,0.3); /*ombre portée boite titre*/
}
.md-bandeau-menu input{
	display: none;
}
.md-bandeau-menu article{ /*attributs des articles-liens masqués*/
	background: #222222; /*couleur fond*/
	margin-top: -5px; /*marge extérieure haute*/
	margin-left:-5px; /*marge extérieure gauche*/
	overflow: hidden;
	height: 0px; /*hauteur = 0 -> invisible*/
	transform:scale3d(1,0,1); /*échelle = 0 -> invisible*/
	transform-origin: top; /*origine transformation : ici haut*/
	position: relative;
	z-index: 10;
}
.md-bandeau-menu article p{ /*attributs des articles-paragraphes*/
	font-style: normal; /*à ajuster ou supprimer*/
	color: #c0c0c0; /*couleur*/
	font-size: 14px; /*taille police*/
	line-height: 23px; /*hauteur ligne*/
	margin:0; /*marges extérieures*/
	padding: 8px 0px; /*marges intérieures*/
}
.md-bandeau-menu article p::before{ /*pseudo class caractère avant*/
	content: '●'; /*contenu*/
	margin-right:5px; /*marge extérieure droite*/
}
.md-bandeau-menu article p a { /*attributs des articles-liens*/
	color:coral; /*couleur*/
}
.md-bandeau-menu article p a:hover { /*attributs des articles-liens survolés*/
	color:gold; /*couleur*/
}
.md-bandeau-menu article p.new::after { /*pseudo class image new après*/ 
	content: url('images/new.png');
	margin-left:5px; /*marge extérieure gauche*/
}
.md-bandeau-menu article p.maj::after { /*pseudo class image maj après*/
	content: url('images/maj.png');
	margin-left:5px; /*marge extérieure gauche*/
}  
.md-bandeau-menu input:checked ~ article{ /*attributs des articles à la sélection*/
	transition:all 0.5s ease; /*transition à la sélection -temps, nature-*/
}
.md-bandeau-menu input:checked ~ article.md{ /*attributs des articles à la sélection*/
	height: auto; /*hauteur*/
	transform:scale3d(1,1,1); /*échelle = 1 -> visible*/
}