Ajouter feuille de style et script
Style et script : fichier ou code source
Service de téléchargements (v1)
Service de changement de skin (thème) à la volée
Service de calendrier avec des liens
Animations au survol - Boîte menu déroulante
→ Une boite-menu déroulante horizontale qui se déploie lors du survol de la souris.
- Lien n°1
Contenu n°1
Origine de la recherche :
Vincent De Oliveira sur (notamment) http://www.css3create.com/
- Lien n°2
Contenu n°2
Haec et huius modi quaedam innumerabilia ultrix facinorum impiorum bonorumque praemiatrix aliquotiens operatur Adrastia atque utinam semper quam vocabulo duplici etiam Nemesim appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena.
- Lien n°3
Contenu n°3
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
- Lien n°4
Contenu n°4
Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari.
Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam.
Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.
- Lien n°5
Contenu n°5
Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.
Lorsque les liens de cette boîte-menu 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 le contenu qui se trouve à sa droite sans l'affecter. Les dimensions de cette boite et des bandeaux sont déterminées en pixels, il faudra donc le réserver à un affichage précis et non "responsive design".
Son affichage sur un mobile n'a guère de sens... Il faudra donc réserver cet affichage à une boîte en Web et supprimer cet affichage pour des écrans de faible définition : voir plus bas mon conseil pour opérer cette suppression.
→ Voir une démonstration de placement de cette boîte ICI Vous pourrez vérifier qu'elle s'affiche en Web mais pas en Mobile.
Le contenu des bandeaux peut très facilement se gérer directement dans l'éditeur de texte d'adHoc.
L'origine de cette recherche est là : Vincent De Oliveira sur (notamment) http://www.css3create.com/
Elle peut être directement, encadrée de ces balises au début du code source de la page ou de la boîte ou dans un fichier de style additionnel comme c'est le cas ici
Voir son contenu ci dessous :
#deploiement-horizontal{
height:280px; /*hauteur de la boite*/
}
#deploiement-horizontal ul:before{ /*Attributs de la boite menu*/
content:""; /*IMPORTANT*/
position:absolute;
z-index:2;
background:#800040; /*couleur du fond de la boite*/
height:100%;
width:170px; /*largeur de la boite*/
margin-top:-45px; /*marge extérieure haute à ajuster*/
border-radius:30px 0px 0px 30px; /*arrondis : ici à gauche*/
box-shadow:0px 0px 10px rgba(0,0,0,0.8); /*ombre portée de la boite -peut être supprimée-*/
}
#deploiement-horizontal ul{
position:relative;
list-style:none;
padding:40px 0px; /*marges intérieures de la boite*/
}
#deploiement-horizontal ul li{ /*zones de survol*/
height:40px; /*hauteur*/
width:157px; /*IMPORTANT:inférieur à largeur de la boite, et à ajuster*/
}
#deploiement-horizontal ul li a.LienMenu{ /*attributs des liens*/
position:relative;
z-index:3;
font-weight:bold; /*ou normal*/
color:#6B73A3; /*couleur du lien*/
font-size:2.0em; /*taille de la police*/
padding-left:5px; /*marge intérieure*/
display:block;
text-decoration:none; /*ou... ce que vous voulez*/
text-shadow:0px 1px 0px rgba(0,0,0,0.7); /*ombre portée de la police -peut être supprimée-*/
}
#deploiement-horizontal ul li div{ /*le bandeau qui se deploie*/
width:0px; /*IMPORTANT y laisser une valeur*/
height:260px; /*hauteur du bandeau*/
padding:0 15px 15px 15px; /*marges intérieures*/
background:rgba(0,0,0,0.4); /*couleur de fond lors du repli*/
border-radius:0px 30px 30px 0px; /*arrondis : ici à droite*/
overflow:hidden;
color:#D3D3D3; /*couleur du texte*/
margin-top:5px; /*marge extérieure haute du bandeau à ajuster*/
position:absolute;top:0px;left:0px;z-index:1;opacity:0; /*IMPORTANT*/
transition:1s left,1s width,1s opacity; /*temps de transition : ici 1 seconde*/
}
#deploiement-horizontal ul li:hover div{ /*le bandeau qui se deploie survolé*/
left:170px; /*position du bandeau : même valeur que largeur de boite*/
width:650px; /*largeur du bandeau*/
background:#6B73A3; /*couleur de fond du bandeau*/
opacity:1; /*opacité de la couleur de fond*/
}
#deploiement-horizontal ul li div h1{ /*éléments du bandeau : titre*/
font-size:1.9em; /*taille de la police titre*/
margin:2px 0px; /*marges "extérieures" du titre*/
color:#800040; /*couleur du titre*/
text-shadow:0px 1px 0px rgba(0,0,0,0.9); /*ombre portée de la police du titre -peut être supprimée-*/
text-align:right; /*left-center-right*/
}
#deploiement-horizontal ul li div p{ /*éléments du bandeau : paragraphe*/
margin:5px 0px; /*marges "extérieures" du paragraphe*/
width:600px; /*largeur du paragraphe*/
overflow:hidden;
font-size:0.9em; /*taille de la police*/
font-weight:normal; /*ou bold*/
text-align:justify; /*ou left-center-right*/
}
#deploiement-horizontal ul li div h1,
#deploiement-horizontal ul li div p,
#deploiement-horizontal ul li div a { /*IMPORTANT*/
background:transparent;
}
#deploiement-horizontal div ul { /* listes pour cet article*/
margin:0 10px;
margin-bottom:50px;
}
J'ai nommé ce fichier animsurvol_boite_menu_deroulante.css : Il est 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_boite_menu_deroulante.css" rel="stylesheet" />
Et enfin, ce type de code là où vous souhaitez placer ce menu :
<div style="float:left;margin-left:0px;padding-right:20px;">
<div id="deploiement-horizontal">
<ul><!-- liste -->
<li><a class="LienMenu" href="#">Lien n°1</a><!-- zonelien-1 -->
<div><!-- contenu-1 -->
<h1>Contenu n°1</h1><!-- titrecontenu-1 -->
<p>Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.</p>
</div><!-- fin contenu-1 -->
</li><!-- fin zonelien-1 -->
<li><a class="LienMenu" href="#">Lien n°2</a><!-- zonelien-2 -->
<div><!-- contenu-2 -->
<h1>Contenu n°2</h1><!-- titrecontenu-2 -->
<p>Haec et huius modi quaedam innumerabilia ultrix facinorum impiorum bonorumque praemiatrix aliquotiens operatur Adrastia atque utinam semper quam vocabulo duplici etiam Nemesim appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena.</p>
</div><!-- fin contenu-2 -->
</li><!-- fin zonelien-2 -->
<li><a class="LienMenu" href="#">Lien n°3</a><!-- zonelien-3 -->
<div><!-- contenu-3 -->
<h1>Contenu n°3</h1><!-- titrecontenu-3 -->
<p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
</div><!-- fin contenu-3 -->
</li><!-- fin zonelien-3 -->
<li><a class="LienMenu" href="#">Lien n°4</a><!-- zonelien-4 -->
<div><!-- contenu-4 -->
<h1>Contenu n°4</h1><!-- titrecontenu-4 -->
<p>Quam quidem partem accusationis admiratus sum et moleste tuli potissimum esse Atratino datam. Neque enim decebat neque aetas illa postulabat neque, id quod animadvertere poteratis, pudor patiebatur optimi adulescentis in tali illum oratione versari.</p>
<p>Vellem aliquis ex vobis robustioribus hunc male dicendi locum suscepisset; aliquanto liberius et fortius et magis more nostro refutaremus istam male dicendi licentiam.</p>
<p>Tecum, Atratine, agam lenius, quod et pudor tuus moderatur orationi meae et meum erga te parentemque tuum beneficium tueri debeo.</p>
</div><!-- fin contenu-4 -->
</li><!-- fin zonelien-4 -->
<li><a class="LienMenu" href="#">Lien n°5</a><!-- zonelien-5 -->
<div><!-- contenu-5 -->
<h1>Contenu n°5</h1><!-- titrecontenu-5 -->
<p>Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.</p>
</div><!-- fin contenu-5 -->
</li><!-- fin zonelien-5 -->
</ul><!-- fin liste -->
</div><!-- fin deploiement-horizontal -->
</div>
NB : Il est facile, dans l'éditeur de texte de placer des images, des textes, des liens comme à votre habitude.
NB : La partie du type [div style="float:left;margin-left:0px;padding-right:20px;"]...[/div] sert à placer ce menu. Il faut l'adapter à votre boîte. C'est la partie du type [div id="deploiement-horizontal"]...[/div][!-- fin deploiement-horizontal --] qui contient le menu, évidemment.
→ Astuce pour ne pas afficher la boîte qui contient ce menu en affichage mobile :
Imaginons que vous ayez déclaré cette boîte en premier (donc position 0), dans la partie 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 déroulante en mobile*/
Voir une démonstration de placement de cette boîte ICI Vous pourrez vérifier qu'elle s'affiche en Web mais pas en Mobile.
Pour plus d'information sur cette mise en place, me contacter ou poster sur le forum.