Boutons déroulants-2

Des boutons qui se déploient.
Habillage plus "complexe" et plusieurs occurences de cet effet dans le même article.

Haec ubi

Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis

Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.

Illud tamen

Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis horrebant.

Homines enim eruditos et sobrios ut infaustos et inutiles vitant, eo quoque accedente quod et nomenclatores adsueti haec et talia venditare, mercede accepta lucris quosdam et prandiis inserunt subditicios ignobiles et obscuros.

Voilà un habillage possible plus "complexe" de ces boutons déroulants, réalisé dans sa quasi-totalité dans la partie <style></style>.

Titre texte aléatoire A

Prince, on envoyait des hommes pour leur ôter le droit d'imposer les limites. Voudrez-vous consacrer la dernière heure, soit qu'il le fasse arriver où il veut. Répéter ce qu'il contenait, il courut tout droit à elle, de ses monuments indestructibles et qui n'a perdu que très peu de vrais amis veuillent y rester. Sais-tu bien, j'ai lu tous les documents officiels, je... Seul, il y voulait accompagner ses chères filles de souffrance en gardait un frisson pendant des heures ; aujourd'hui il est en faute.

Titre texte aléatoire B

Flanque-moi la paix, elle paraissait aussi déplacée dans cette triste situation, quand je devrais laisser mes os dans ta force qui tue et qui mérite une mention particulière. Sauf quant à une menace tellement grave qu'il était immobile et calme, et commença sa déposition. Donne-m'en un sur dix, ayant été une fois éclairés, et qui naissent et meurent en ne connaissant de la ville tu y allais. Héroïque, n'est-ce point encore ici la première origine de cette idée. Chacune dispose du bon droit, que les autres ; théoriquement, ils ont un venin semblable au venin d'un crapaud rouge. Tombe sur elle toute la joie que me causait l'impression du lendemain le plaisir que lui a causées l'obstination d'une paysanne ; et il se cassa la jambe. Holà, quelle est ma situation ; mais elle accueillit ma suggestion avec mépris et dédain. Soupçonner une âme jeune est quelquefois un sot rôle, surtout par la droite de l'entrée.

Témoin de la manière de prendre ta part ? Parvenue au terme extrême de la voir s'éprendre de quelque autre animal de cette taille, et qui sous la restauration. Entre tous les peuples de la terre !

Titre texte aléatoire C

Jette-le, qu'on pense de vous, dans le vieux bâtiment qui avait fait des voeux pour qu'il eût pu employer la procédure usuelle.

Assise au petit côté de l'accoudoir, rappel permanent de son ennemi et en retombant, se déployaient pour tout inonder. Vers une heure moins le quart. Elle-même le dit : préparez vous dès aujourd'hui, si vos affaires ne vont pas ensemble ? Versait-elle des larmes, et tous quatre s'acheminèrent vers l'église, sombre, immense, dominatrice, avec un peu plus tôt aujourd'hui !

Étonnée d'abord en boitant, sur le carreau et qu'il savait, par la raison contraire, la bonté d'envoyer le cadeau d'une de ces filles, j'ai essayé... Envie de quoi, au lieu des boyards si impatiemment attendus se firent entendre de l'intérieur de son confessionnal. Refusez-vous de les accepter, puisqu'elle devait si peu durer.

Plus anecdotique sans doute mais qui montre la possibilité d'utiliser plusieurs occurences de cette astuce dans le même article (dans cet article, il y a 4 occurences : chaque affichage horizontal nécessite une occurence). Il suffit alors de copier plusieurs fois le contenu de la série <style></style> en modifiant les identifiants et les classes et en prenant soins de faire la même chose dans le corps de l'article pour l'appel à ces classes.

Il faut aussi prendre soin de modifier les z-index dans le style. Les éléments les plus hauts dans la page doivent avoir les z-index les plus élévés pour recouvrir les autres éléments lors du déploiement.

Voir ci dessous pour la partie <style></style> et plus bas pour la structure du corps de l'article.

#boite_deploiement2 { /*espace qui contient les différents boutons à déployer : 2ème ligne horizontale*/
width:96%; /*largeur de tous les boutons : ici un seul bouton*/
height:48px;
margin:0 auto;
}
#boite_deploiement2 h5 { /*attributs des titres des boutons*/
position:relative;
z-index:6; /*à ajuster en fonction de la position en hauteur de l'élément*/
font-weight:normal; /* ou bold */
font-size:1.4em; /*taille du texte*/
border:1px solid #FF8000; /*bordure du bouton : épaisseur, nature, couleur*/
background:#FFFF80; /*couleur de fond*/
border-radius:8px; /*arrondis*/
}
#boite_deploiement2 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:#333333; /*couleur du texte*/
border-radius:8px; /*arrondis : même valeur que ci-dessus IMPORTANT*/
text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiement2 h5 a:hover { /*attributs des liens survolés sur les boutons*/
font-weight:normal; /* ou bold */
color:#111111; /*couleur du texte au survol*/
}
.deploiement2 { /*Bouton et Bandeau déroulant*/
width:96%; /*largeur du bouton et du bandeau déroulant : ici la largeur totale*/
height:1px; /*IMPORTANT*/
float:left;
margin:0 0; /*marges extérieures des boutons et bandeaux déroulants*/
}
.deploiement2 div { /*Attributs du Bandeau déroulant*/
position:relative;
z-index:5; /*à ajuster en fonction de la position en hauteur de l'élément*/
background:#131313; /*couleur du fond*/
padding:10px; /*marges intérieures du bandeau déroulant*/
margin-top:-10px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
font-size:1em; /*taille du texte*/
color:#FFFF80; /*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...*/
}
.deploiement2:hover div { /*Attributs du Bandeau déroulant au survol du bouton et du bandeau*/
transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement2 div p, .deploiement2 div p a, .deploiement2 div p a:hover { /*IMPORTANT : ne pas modifier*/
background:transparent;
padding:0;
}

#boite_deploiement3 { /*espace qui contient les différents boutons à déployer : 3ème ligne horizontale*/
width:96%; /*largeur de tous les boutons : ici un seul bouton*/
height:48px;
margin:0 auto;
}
#boite_deploiement3 h5 { /*attributs des titres des boutons*/
position:relative;
z-index:4; /*à ajuster en fonction de la position en hauteur de l'élément*/
font-weight:normal; /* ou bold */
font-size:1.4em; /*taille du texte*/
border:1px solid #FF8000; /*bordure du bouton : épaisseur, nature, couleur*/
background:#A6FFFF; /*couleur de fond*/
border-radius:8px; /*arrondis*/
}
#boite_deploiement3 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:#333333; /*couleur du texte*/
border-radius:8px; /*arrondis : même valeur que ci-dessus IMPORTANT*/
text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiement3 h5 a:hover { /*attributs des liens survolés sur les boutons*/
font-weight:normal; /* ou bold */
color:#111111; /*couleur du texte au survol*/
}
.deploiement3 { /*Bouton et Bandeau déroulant*/
width:96%; /*largeur du bouton et du bandeau déroulant : ici la largeur totale*/
height:1px; /*IMPORTANT*/
float:left;
margin:0 0; /*marges extérieures des boutons et bandeaux déroulants*/
}
.deploiement3 div { /*Attributs du Bandeau déroulant*/
position:relative;
z-index:3; /*à ajuster en fonction de la position en hauteur de l'élément*/
background:#3F3F3F; /*couleur du fond*/
padding:10px; /*marges intérieures du bandeau déroulant*/
margin-top:-10px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
font-size:1em; /*taille du texte*/
color:#A6FFFF; /*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...*/
}
.deploiement3:hover div { /*Attributs du Bandeau déroulant au survol du bouton et du bandeau*/
transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement3 div p, .deploiement3 div p a, .deploiement3 div p a:hover { /*IMPORTANT : ne pas modifier*/
background:transparent;
padding:0;
}

#boite_deploiement4 { /*espace qui contient les différents boutons à déployer : 4ème ligne horizontale*/
width:96%; /*largeur de tous les boutons : ici un seul bouton*/
height:48px;
margin:0 auto;
}
#boite_deploiement4 h5 { /*attributs des titres des boutons*/
position:relative;
z-index:2; /*à ajuster en fonction de la position en hauteur de l'élément*/
font-weight:normal; /* ou bold */
font-size:1.4em; /*taille du texte*/
border:1px solid #FF8000; /*bordure du bouton : épaisseur, nature, couleur*/
background:#AEFFAE; /*couleur de fond*/
border-radius:8px; /*arrondis*/
}
#boite_deploiement4 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:#333333; /*couleur du texte*/
border-radius:8px; /*arrondis : même valeur que ci-dessus IMPORTANT*/
text-decoration:none; /*... ou ce que l'on veut*/
}
#boite_deploiement4 h5 a:hover { /*attributs des liens survolés sur les boutons*/
font-weight:normal; /* ou bold */
color:#111111; /*couleur du texte au survol*/
}
.deploiement4 { /*Bouton et Bandeau déroulant*/
width:96%; /*largeur du bouton et du bandeau déroulant : ici la largeur totale*/
height:1px; /*IMPORTANT*/
float:left;
margin:0 0; /*marges extérieures des boutons et bandeaux déroulants*/
}
.deploiement4 div { /*Attributs du Bandeau déroulant*/
position:relative;
z-index:1; /*à ajuster en fonction de la position en hauteur de l'élément*/
background:#585858; /*couleur du fond*/
padding:10px; /*marges intérieures du bandeau déroulant*/
margin-top:-10px; /*marge extérieure haute du bandeau déroulant, à ajuster pour être légèrement couvert par le bouton*/
font-size:1em; /*taille du texte*/
color:#AEFFAE; /*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...*/
}
.deploiement4:hover div { /*Attributs du Bandeau déroulant au survol du bouton et du bandeau*/
transform:scaleY(1); /*échelle 1 : donc visible*/
}
.deploiement4 div p, .deploiement4 div p a, .deploiement4 div p a:hover { /*IMPORTANT : ne pas modifier*/
background:transparent;
padding:0;
}
</style>

Avec les mêmes code de surlignement que le tutoriel précédent, la structure du contenu des boutons et bandeaux.

<div id="boite_deploiement">
<div class="deploiement">
<h5><a href="#">TITRE 1</a></h5>

       <div style="background:linear-gradient(rgba( 0, 0, 0, 0.6), rgba( 0, 0, 0, 1.0))">
           <p>CONTENU 1</p>
       </div>
   </div>

<div class="deploiement">
<h5><a href="#">TITRE 2</a></h5>

       <div style="background:linear-gradient(rgba( 0, 64, 128, 0.6), rgba( 0, 64, 128, 1.0))">
           <p>CONTENU 2</p>
       </div>
   </div>
</div>

<div id="boite_deploiement2">
<div class="deploiement2">
<h5><a href="#">Titre texte aléatoire A</a></h5>

       <div>
           <p>Contenu Texte aléatoire A</p>
       </div>
   </div>
</div>

<div id="boite_deploiement3">
<div class="deploiement3">
<h5><a href="#">Titre texte aléatoire B</a></h5>

       <div>
           <p>Contenu Texte aléatoire B</p>
       </div>
   </div>
</div>

<div id="boite_deploiement4">
<div class="deploiement4">
<h5><a href="#">Titre texte aléatoire C</a></h5>

       <div>
           <p>Contenu Texte aléatoire C</p>
       </div>
   </div>
</div>

Pour plus d'informations ou d'aides pour utiliser ce dispositif, vous pouvez poster sur le forum de ce site.

(NB : Pour la seconde partie de cet article, avec ses 3 boutons superposés, il est sûr que, dans GuppY, en natif, les volets "accordéons" offrent des avantages non négligeables sur cette présente astuce .)