Des boutons fixes déployables
-
Contenu 1
DU TEXTE, DES LIENS... : TEXTE ALÉATOIRE
Quoique bien armé, suivant la foule, le dandy ou le révolutionnaire exigent l'unité, car pression sociale et élan d'amour qui les tuera !
Ne criez pas, je serais sûrement très surpris ! Imaginez-vous qu'elle vient de mon arrière-grand-père donc, qui était réellement surprenant dans la personne que j'aime. Je fais observer qu'il trouverait bien moyen d'utiliser le vent qui lui arrivait dans le port du salut. Or si vous n'y manquez donc pas, à moi, un manant qui paraissait avoir onze ans. Visitez ces couvents, sans doute. Pourrions-nous en finir avec mes misères, d'adopter votre enfant comme ça à présent !
Calmez-vous, mon enfant ; si vous recourez au magistrat et au pouvoir du moindre de nos caprices, de la saine raison ne doit pas vouloir parvenir au plus haut prix où il s'agirait de prison.
-
Contenu 2
DES IMAGES
-
Contenu 3
UNE VIDÉO HÉBERGÉE SUR VOTRE SITE (OU EMBED... BIEN SÛR...)
-
Contenu 4
UN IFRAME QUI CONTIENT CE QUE VOUS SOUHAITEZ....
-
Contenu 5
Beaucoup de contenus sont possibles, avec certaines limites toutefois...
Les balises <div> </div> et <section> </section> utilisées dans les contenus désorganiseront l'affichage : En effet, celles-ci sont déjà utilisées et définies dans le style du procédé...
Des boutons fixes qui se déploient lors du survol de la souris
pour faire apparaitre un bandeau.
C'est le procédé qui est visible sur la gauche de ce site. Sur celui-ci, les contenus reprennent ceux du menu linéaire et de la boite-menu déroulante (qui ont sensiblement la même fonction...). C'est uniquement pour montrer le fonctionnement.
Ce procédé est grandement inspiré par le mini menu vertical à étiquettes glissantes présenté sur ce site https://www.outils-web.com/page-script-html-css-menu.asp . Mais de nombreux aménagements ont été nécessaires pour ce menu fixe.
Ci-contre, un exemple dont le code est détaillé ci-dessous (pas le contenu qui n'est là que pour illustrer). Les boutons ne sont pas fixés évidemment, mais il est très facile de reprendre le code source, de le placer dans une boite libre et de le fixer.
Lorsque les boutons sont survolés. Un bandeau déroulant se déploie et offre de nouvelles informations qui peuvent être des liens, des images... Le bandeau déroulant recouvre (en principe... *) le contenu qui se trouve à sa droite sans l'affecter. Les dimensions de ces boutons et la largeur des bandeaux sont déterminées en pixels, il faudra donc les réserver à un affichage précis et non "responsive design".
Le contenu des bandeaux peut très facilement se gérer directement dans l'éditeur de texte de GuppY !
(* Il peut y avoir des soucis de superposition liés à l'utilisation de z-index, qui ne s'avère pas aussi simple à utiliser que je ne le croyais. J'en ai résolu quelques uns, n'hésitez pas à poster sur le forum en cas de souci, je tenterai de trouver une solution...)
Attention toutefois :
L'effet produit, d'après mes tests, est possible sur les différents navigateurs sur les ordinateurs. Sur tablette et sur smartphone, pour ce que j'ai pu essayer, cela fonctionne de manière imparfaite (le survol sur un écran tactile ne fonctionne pas, il faut "cliquer"). Donc ce n'est pas vraiment "Mobile Friendly" et c'est plutôt à réserver à des articles ou des boites libres qui seront visionnés sur ordinateurs ou tablettes. Il convient donc de réfléchir à ce que l'on veut obtenir.
Les imagettes qui servent aux boutons vont par deux, sont de 192px*192px et sont redimensionnées dans le code. A vous d'adapter les liens et les imagettes à vos souhaits.
Ci-dessous le code de la partie <style> </style> à copier-coller au début du code source d'une boite libre (ou dans votre fichier styleplus.css), puis la structure du code à placer dans le code source de la boite libre en remplissant les intitulés et les contenus à votre goût.
Remplacez comme vous le souhaitez Item1, Item2... à votre choix mais pensez à modifier les appels à ces classes.
title="Item 1" etc ... servent aux intitulés des info-bulles
<style type="text/css">
#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:10px; /* 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 section{ /* 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 section{ /* 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 .Item1 { /* Attributs du bouton 1 non survolé */
background:url('img/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('img/NavLat/clock.png')no-repeat; /* URL de l'image */
background-size:48px; /* taille obtenue pour l'affichage, ici 48px*48px */
}
#boutons-deployables .Item1 section { /* Attributs du bandeau 1 */
background-color:#E1F8FD; /* couleur de fond */
color:inherit; /* 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('img/NavLat/layers2.png')no-repeat;
background-size:48px;
}
#boutons-deployables .Item2:hover {
background:url('img/NavLat/layers.png')no-repeat;
background-size:48px;
}
#boutons-deployables .Item2 section {
background-color:#DEE1E4;
color:inherit;
border:2px solid #434951;
}
#boutons-deployables .Item3 {
background:url('img/NavLat/creditcard2.png')no-repeat;
background-size:48px;
}
#boutons-deployables .Item3:hover {
background:url('img/NavLat/creditcard.png')no-repeat;
background-size:48px;
}
#boutons-deployables .Item3 section {
background-color:#EEEEEE;
color:inherit;
border:2px solid #A0A0A0;
}
#boutons-deployables .Item4 {
background:url('img/NavLat/settings2.png')no-repeat;
background-size:48px;
}
#boutons-deployables .Item4:hover {
background:url('img/NavLat/settings.png')no-repeat;
background-size:48px;
}
#boutons-deployables .Item4 section {
background-color:#F5E0E0;
color:inherit;
border:2px solid #C53D3D;
}
#boutons-deployables .Item5 {
background:url('img/NavLat/piechart2.png')no-repeat;
background-size:48px;
}
#boutons-deployables .Item5:hover {
background:url('img/NavLat/piechart.png')no-repeat;
background-size:48px;
}
#boutons-deployables .Item5 section {
background-color:#E9D9F4;
color:inherit;
border:2px solid #762FAC;
}
</style>
<div style="float:left;margin-right:40px;">
<div>
<ul id="boutons-deployables">
<li>
<div class="Item1" href="#" title="Item 1">
<section>
<p>Contenu 1</p>
</section>
</div>
</li>
<li>
<div class="Item2" href="#" title="Item 2">
<section>
<p>Contenu 2</p>
</section>
</div>
</li>
<li>
<div class="Item3" href="#" title="Item 3">
<section>
<p>Contenu 3</p>
</section>
</div>
</li>
<li>
<div class="Item4" href="#" title="Item 4">
<section>
<p>Contenu 4</p>
</section>
</div>
</li>
<li>
<div class="Item5" href="#" title="Item 5">
<section>
<p>Contenu 5</p>
</section>
</div>
</li>
</ul>
</div>
</div>
Pour installer proprement cette série de boutons fixes sur le côté de votre site, il faut ne pas faire apparaitre le titre de la boite libre, pour cela faites-le précéder du symbole §
§BoutonsLat par exemple...
et dans votre fichier styleplus placez (en remplaçant FB246 par votre n° de boite libre) au moins cela :
.tblbox.FB246 { /* Corps boite BoutonsLat */
background: transparent;
}
Puis déclarez simplement en admin>Config boites, votre nouvelle boite libre sur une ligne du TopBoxes (boites du haut), avec un pourcentage d'occupation non nul (de 10% par exemple mais 1% suffit, ce qui laisse 99% pour les deux emplacements du reste de la ligne).
Pour toute aide afin d'utiliser ce dispositif, vous pouvez poster sur le forum de ce site.
Catégorie : - Changements au survol
Page lue 96985 fois
