Animations au survol - Des boutons fixes déployables

→ Des boutons déployables que l'on peut fixer à gauche ou à droite du site.

  • 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

    puzzle_adhoc.png

  • 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] 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é...

C'est le procédé qui est visible sur la gauche de ce site dans la partie démos. Ce procédé est grandement inspiré par le mini menu vertical à étiquettes glissantes présenté sur ce site http://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 boîte 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 d'adHoc !

(* 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 "Mobile Friendly" et c'est plutôt à réserver à des pages ou des boîtes qui seront visionnées sur ordinateurs ou tablettes. Il convient donc de réfléchir à ce que l'on veut obtenir. Mais il est facile de l'installer en Web et de supprimer son fonctionnement en Mobile (voir en bas de cette page).

Les imagettes qui servent aux boutons vont par deux, sont de 192px*192px et sont redimensionnées dans le code. Elles sont placées dans un dossier tutoriels/NavLat situé dans le dossier images d'adHoc. A vous d'adapter les liens et les imagettes à vos souhaits.

Ci-dessous, le code du style utilisé, à placer dans une partie [style type="text/css"]...[/style] au début de votre code source ou dans un fichier spécifique comme c'est le cas ici, nommé animsurvol_boutons_deployables.css, 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_deployables.css" rel="stylesheet" />    

Remplacez comme vous le souhaitez, dans le style Item1, Item2... à votre choix mais pensez à modifier les appels à ces classes dans le code de votre page, votre boîte.


#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;
}

Attention ! J'ai placé volontairement des barres obliques inversées ( \ antislashs) à la place des barres obliques (/ slashs) dans les urls ci-dessus afin que les chemins s'affichent totalement, n'oubliez pas de rétablir des barres obliques correctes dans vos chemins.

Puis la structure du code à placer dans le code source :


<div style="float:left;margin-right:50px;">
<div><!-- boutons deployables -->
<ul id="boutons-deployables">

 <li>
<div class="Item1" href="#" title="Item 1">
<contenu>
<h4>Titre 1</h4>
<p>texte 1</p>
</contenu>
</div>
</li>

 <li>
<div class="Item2" href="#" title="Item 2">
<contenu>
<h4>Titre 2</h4>
<p>texte 2</p>
</contenu>
</div>
</li>

 <li>
<div class="Item3" href="#" title="Item 3">
<contenu>
<h4>Titre 3</h4>
<p>texte 3</p>
</contenu>
</div>
</li>

 <li>
<div class="Item4" href="#" title="Item 4">
<contenu>
<h4>Titre 4</h4>
<p>texte 4</p>
</contenu>
</div>
</li>

 <li>
<div class="Item5" href="#" title="Item 5">
<contenu>
<h4>Titre 5</h4>
<p>texte 5</p>
</contenu>
</div>
</li>

</ul>
</div><!-- fin boutons deployables -->
</div>

title="Item 1" etc ... servent aux intitulés des info-bulles

→ Astuce pour ne pas afficher la boîte qui contient ces boutons en affichage mobile :

Imaginons que vous ayez déclaré cette boîte en premier (donc position 0), dans la section horizontale UpTab de la page _index. Il faut éditer votre feuille de style style.css et dans une des deux parties (à votre choix) :

@media screen and (max-width: 900px) {...}

@media screen and (max-width: 480px) {...}

Vous ajoutez cette règle :

#UpTab-0 {display:none;} /*ne pas afficher la boite menu latéral fixe en mobile*/

NB : Si vous souhaitez que ce menu soit en Web sur la page _index ET sur la page _default, il faut bien sûr que la section horizontale concernée soit déclarée dans les fichiers _index.inc et _default.inc de votre skin.

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


Astuces

adHoc

Iframes responsives

Camera

Unite Gallery

Animations au survol

Autres astuces en CSS

Audio-Players

Carousels