Nouvelles des Amis -
Mentions légales et politique de confidentialité
Conformément aux dispositions des articles 6-III et 19 de la loi n°2004-575 du 21 juin 2004 pour la confiance dans l’économie numérique (LCEN) les présentes mentions légales sont portées à la connaissance des utilisateurs et visiteurs de ce site.
L’accès et l’utilisation de ce site sont soumis aux présentes mentions légales détaillées ci-dessous ainsi qu’aux lois et/ou règlements applicables.
La connexion, l’accès et l’utilisation de ce site impliquent l’acceptation des dispositions de ces mentions légales.
Informations légales
En vertu de l’article 6 de la loi n°2004-575 du 21 juin 2004 (LCEN) l’identité des intervenants dans le cadre de la réalisation du site et de son suivi est portée à la connaissance des visiteurs :
Directeur de la publication, Webmestre : Jean-Denis Monnet, 11 rue de Chenay, 51220 Merfy
Ce site a été conçu avec le CMS Guppy
les plugins : Sommaire d'OMT, ArchNwsl de Dipisoft, Ghost de Jean-Michel Misrachi
et les codes additionnels de sliders (slideshows) (diaporamas), de player audio
Camera de Manuel Masia
Flexslider de Tyler Smith (WooThemes.com)
WaterwheelCarousel et FeatureCarousel de Brian Osborne
CircleNavigationEffect de Mary Lou
Audio-Player with playlist d'Andrey
Jplayer de Mark J. Panaghiston
Hébergé par LWS (Ligne Web Service) : 10, RUE DE PENTHIEVRE, 75008 PARIS, FRANCE. Tél : 01.77.62.30.03
¤ tous les internautes qui naviguent, lisent, visionnent et utilisent ce site sont considérés comme utilisateurs.
¤ en utilisant le site, vous reconnaissez avoir pris connaissance de ces conditions et les avoir acceptées.
Propriété intellectuelle
Le CMS GuppY est sous licence CeCILL et pour les scripts utilisés, sous leur licence d'origine.
Toute reprise d'article, de nouvelle, de billet, de documentations diverses ou de posts sur le forum de ce site devra comporter une citation de la source avec un lien direct vers l'original.
Politique de confidentialité
Conformément aux dispositions de l’article 5 du règlement européen 2016/679, la collecte et le traitement des données des utilisateurs respectent les principes suivants :
¤ Les données ne peuvent être collectées et traitées qu’avec le consentement de l’utilisateur propriétaire des données.
¤ La collecte et le traitement des données sont limitées au maximum pour l’affichage du site, pour les commentaires, pour les messages sur le forum, pour le traitement des préférences des membres. Chaque membre peut modifier, supprimer ses préférences à tout moment.
¤ L’éditeur du site s’engage à garantir l’intégrité et la confidentialité des données collectées.
Conformément aux exigences de l’article 6 du règlement européen 2016/679, la collecte et le traitement des données à caractère personnel n’interviennent que si l’utilisateur a expressément consenti au traitement.
¤ Les données à caractère personnel collectées sur le site sont :
pour les visiteurs : le pseudo, l’adresse IP, l’adresse courriel après acceptation formelle dans un formulaire de contact, commentaires ou réactions aux articles.
pour les membres : le pseudo, l’adresse IP, l’adresse courriel après acceptation formelle dans le formulaire d’inscription avec leur traitement pour la sauvegarde des préférences.
¤ Les données collectées et traitées par le site sont exclusivement hébergées et traitées en France.
¤ L’éditeur de ce site assure le traitement et la protection des données, il peut être contacté par la page Contact de ce site.
Les droits de l’utilisateur et les procédures de mise en œuvre des droits de l’utilisateur
Conformément à la réglementation, l’utilisateur possède les droits énumérés ci-dessous, pour faire droit à sa demande, il est tenu de communiquer ses nom, prénom et adresse courriel.
L’éditeur du site est tenu de répondre à l’utilisateur dans un délai de trente jours maximum.
¤ Droit d’accès, de rectification et droit à l’oubli
L’utilisateur peut prendre connaissance, mettre à jour,modifier ou demander la suppression des données le concernant par la page Contact du site. S’il en possède un, l’utilisateur peut supprimer son compte en cliquant sur « Mon compte » dans la boite Préférences, puis en supprimant ses préférences.
¤ Droit à la portabilité des données
L’utilisateur peut demander la portabilité des données personnelles détenues par le site en faisant une demande par la page Contact du site.
¤ Droit à la limitation et à l’opposition du traitement des données
L’utilisateur a le droit de s’opposer au traitement des données par le site sans que le site ne puisse refuser.
¤ Droit de déterminer le sort des données après la mort
Il est rappelé à l’utilisateur qu’il peut organiser le devenir de ses données collectées et traitées s’il décède, conformément à la loi n°2016-1321 du 7 octobre 2016.
¤ Droit de saisir l’autorité de contrôle compétente
Si l’éditeur du site décide de ne pas répondre à la demande de l’utilisateur, et si celui-ci souhaite contester cette décision, il est en droit de saisir la Commission Nationale de l’Informatique et des Libertés (CNIL) - https://www.cnil.fr – ou tout juge compétent.
Obligations du responsable du traitement des données
L’éditeur du site s'engage à protéger les données à caractère personnel collectées, à ne pas les transmettre à des tiers hormis dans un cadre judiciaire, à avertir l'utilisateur en cas de rectification ou de suppression des données.
Sur ce site, une protection admin est mise en place, la mise à jour est appliquée à chaque sortie d’une nouvelle version.
Dans le cas où l'intégrité, la confidentialité ou la sécurité des données à caractère personnel de l'utilisateur est compromise, l'éditeur du site s'engage à informer l'utilisateur par tout moyen.
Cookies
Le site a recours aux techniques de "cookies" lui permettant de traiter des statistiques et des informations sur le trafic, de faciliter la navigation et d'améliorer le service pour le confort de l'utilisateur.
Pour l'utilisation de fichiers "cookies" impliquant la sauvegarde et l'analyse de données à caractère personnel, le consentement de l'utilisateur est nécessairement demandé.
Ce consentement de l'utilisateur est considéré comme valide pour une durée de 365 jours. A l'issue de cette période, le site demandera à nouveau l'autorisation de l'utilisateur pour enregistrer des fichiers "cookies" sur son disque dur.
¤ Opposition de l'utilisateur à l'utilisation de fichiers "cookies" par le site
Il est porté à la connaissance de l'utilisateur qu'il peut s'opposer à l'enregistrement de ces "cookies" en configurant son logiciel de navigation.
Dans le cas où l'utilisateur décide de désactiver les fichiers "cookies", il pourra poursuivre sa navigation sur le site. Toutefois, tout dysfonctionnement du site provoqué par cette manipulation ne pourra être considéré comme étant du fait de l'éditeur du site.
¤ Description des fichiers "cookies" utilisés par le site
L'éditeur du site attire l'attention de l'utilisateur sur le fait que les cookies suivants sont utilisés lors de sa navigation :
- pour les visiteurs : GuppYConnect5, GuppYCookie5, GuppYCrypt, GuppYScreen (leur durée de vie est la durée de la connexion).
- pour les membres connectés : GuppYConnect5, GuppYCookie5, GuppYCrypt, GuppYScreen, GuppYUser5 (leur durée de vie est de 365 jours, sauf en cas de déconnexion, dans ce cas ils seront supprimés, à la reconnexion ils seront recréés).
- pour les utilisateurs de services : GuppYPost5 (forum, livre d'or, nouvelles, réactions aux articles), GuppYPref5 (inscriptions, connexion, administration), GuppYContact5 (contact avancé), GuppYAdmPref5 (administration), GuppYConnect5 (connexion, administration).
Depuis la version 5.02.06 du CMS GuppY, les cookies GuppYPref5, GuppYConnect5, GuppYCrypt, GuppYUser5 sont cryptés pour la sécurité du contenu, avec la possibilité de changer la clé de cryptage pour l’éditeur du site.
Loi applicable et juridiction
Les présentes Mentions Légales sont régies par la loi française. En cas de différend et à défaut d'accord amiable, le litige sera porté devant les tribunaux français conformément aux règles de compétence en vigueur.
Contact
Pour tout signalement de contenus ou d'activités illicites sur ce site, l'utilisateur peut contacter l'éditeur par la page Contact de ce site ou par courrier recommandé avec accusé de réception adressé à l'éditeur aux coordonnées précisées dans les présentes mentions légales.
Mentions légales et politique de confidentialité
Conformément aux dispositions des articles 6-III et 19 de la loi n°2004-575 du 21 juin 2004 pour la confiance dans l’économie numérique (LCEN) les présentes mentions légales sont portées à la connaissance des utilisateurs et visiteurs de ce site.
L’accès et l’utilisation de ce site sont soumis aux présentes mentions légales détaillées ci-dessous ainsi qu’aux lois et/ou règlements applicables.
La connexion, l’accès et l’utilisation de ce site impliquent l’acceptation des dispositions de ces mentions légales.
Informations légales
En vertu de l’article 6 de la loi n°2004-575 du 21 juin 2004 (LCEN) l’identité des intervenants dans le cadre de la réalisation du site et de son suivi est portée à la connaissance des visiteurs :
Directeur de la publication, Webmestre : Jean-Denis Monnet, 11 rue de Chenay, 51220 Merfy
Ce site a été conçu avec le CMS Guppy
les plugins : Sommaire d'OMT, ArchNwsl de Dipisoft, Ghost de Jean-Michel Misrachi
et les codes additionnels de sliders (slideshows) (diaporamas), de player audio
Camera de Manuel Masia
Flexslider de Tyler Smith (WooThemes.com)
WaterwheelCarousel et FeatureCarousel de Brian Osborne
CircleNavigationEffect de Mary Lou
Audio-Player with playlist d'Andrey
Jplayer de Mark J. Panaghiston
Hébergé par LWS (Ligne Web Service) : 10, RUE DE PENTHIEVRE, 75008 PARIS, FRANCE. Tél : 01.77.62.30.03
¤ tous les internautes qui naviguent, lisent, visionnent et utilisent ce site sont considérés comme utilisateurs.
¤ en utilisant le site, vous reconnaissez avoir pris connaissance de ces conditions et les avoir acceptées.
Propriété intellectuelle
Le CMS GuppY est sous licence CeCILL et pour les scripts utilisés, sous leur licence d'origine.
Toute reprise d'article, de nouvelle, de billet, de documentations diverses ou de posts sur le forum de ce site devra comporter une citation de la source avec un lien direct vers l'original.
Politique de confidentialité
Conformément aux dispositions de l’article 5 du règlement européen 2016/679, la collecte et le traitement des données des utilisateurs respectent les principes suivants :
¤ Les données ne peuvent être collectées et traitées qu’avec le consentement de l’utilisateur propriétaire des données.
¤ La collecte et le traitement des données sont limitées au maximum pour l’affichage du site, pour les commentaires, pour les messages sur le forum, pour le traitement des préférences des membres. Chaque membre peut modifier, supprimer ses préférences à tout moment.
¤ L’éditeur du site s’engage à garantir l’intégrité et la confidentialité des données collectées.
Conformément aux exigences de l’article 6 du règlement européen 2016/679, la collecte et le traitement des données à caractère personnel n’interviennent que si l’utilisateur a expressément consenti au traitement.
¤ Les données à caractère personnel collectées sur le site sont :
pour les visiteurs : le pseudo, l’adresse IP, l’adresse courriel après acceptation formelle dans un formulaire de contact, commentaires ou réactions aux articles.
pour les membres : le pseudo, l’adresse IP, l’adresse courriel après acceptation formelle dans le formulaire d’inscription avec leur traitement pour la sauvegarde des préférences.
¤ Les données collectées et traitées par le site sont exclusivement hébergées et traitées en France.
¤ L’éditeur de ce site assure le traitement et la protection des données, il peut être contacté par la page Contact de ce site.
Les droits de l’utilisateur et les procédures de mise en œuvre des droits de l’utilisateur
Conformément à la réglementation, l’utilisateur possède les droits énumérés ci-dessous, pour faire droit à sa demande, il est tenu de communiquer ses nom, prénom et adresse courriel.
L’éditeur du site est tenu de répondre à l’utilisateur dans un délai de trente jours maximum.
¤ Droit d’accès, de rectification et droit à l’oubli
L’utilisateur peut prendre connaissance, mettre à jour,modifier ou demander la suppression des données le concernant par la page Contact du site. S’il en possède un, l’utilisateur peut supprimer son compte en cliquant sur « Mon compte » dans la boite Préférences, puis en supprimant ses préférences.
¤ Droit à la portabilité des données
L’utilisateur peut demander la portabilité des données personnelles détenues par le site en faisant une demande par la page Contact du site.
¤ Droit à la limitation et à l’opposition du traitement des données
L’utilisateur a le droit de s’opposer au traitement des données par le site sans que le site ne puisse refuser.
¤ Droit de déterminer le sort des données après la mort
Il est rappelé à l’utilisateur qu’il peut organiser le devenir de ses données collectées et traitées s’il décède, conformément à la loi n°2016-1321 du 7 octobre 2016.
¤ Droit de saisir l’autorité de contrôle compétente
Si l’éditeur du site décide de ne pas répondre à la demande de l’utilisateur, et si celui-ci souhaite contester cette décision, il est en droit de saisir la Commission Nationale de l’Informatique et des Libertés (CNIL) - https://www.cnil.fr – ou tout juge compétent.
Obligations du responsable du traitement des données
L’éditeur du site s'engage à protéger les données à caractère personnel collectées, à ne pas les transmettre à des tiers hormis dans un cadre judiciaire, à avertir l'utilisateur en cas de rectification ou de suppression des données.
Sur ce site, une protection admin est mise en place, la mise à jour est appliquée à chaque sortie d’une nouvelle version.
Dans le cas où l'intégrité, la confidentialité ou la sécurité des données à caractère personnel de l'utilisateur est compromise, l'éditeur du site s'engage à informer l'utilisateur par tout moyen.
Cookies
Le site a recours aux techniques de "cookies" lui permettant de traiter des statistiques et des informations sur le trafic, de faciliter la navigation et d'améliorer le service pour le confort de l'utilisateur.
Pour l'utilisation de fichiers "cookies" impliquant la sauvegarde et l'analyse de données à caractère personnel, le consentement de l'utilisateur est nécessairement demandé.
Ce consentement de l'utilisateur est considéré comme valide pour une durée de 365 jours. A l'issue de cette période, le site demandera à nouveau l'autorisation de l'utilisateur pour enregistrer des fichiers "cookies" sur son disque dur.
¤ Opposition de l'utilisateur à l'utilisation de fichiers "cookies" par le site
Il est porté à la connaissance de l'utilisateur qu'il peut s'opposer à l'enregistrement de ces "cookies" en configurant son logiciel de navigation.
Dans le cas où l'utilisateur décide de désactiver les fichiers "cookies", il pourra poursuivre sa navigation sur le site. Toutefois, tout dysfonctionnement du site provoqué par cette manipulation ne pourra être considéré comme étant du fait de l'éditeur du site.
¤ Description des fichiers "cookies" utilisés par le site
L'éditeur du site attire l'attention de l'utilisateur sur le fait que les cookies suivants sont utilisés lors de sa navigation :
- pour les visiteurs : GuppYConnect5, GuppYCookie5, GuppYCrypt, GuppYScreen (leur durée de vie est la durée de la connexion).
- pour les membres connectés : GuppYConnect5, GuppYCookie5, GuppYCrypt, GuppYScreen, GuppYUser5 (leur durée de vie est de 365 jours, sauf en cas de déconnexion, dans ce cas ils seront supprimés, à la reconnexion ils seront recréés).
- pour les utilisateurs de services : GuppYPost5 (forum, livre d'or, nouvelles, réactions aux articles), GuppYPref5 (inscriptions, connexion, administration), GuppYContact5 (contact avancé), GuppYAdmPref5 (administration), GuppYConnect5 (connexion, administration).
Depuis la version 5.02.06 du CMS GuppY, les cookies GuppYPref5, GuppYConnect5, GuppYCrypt, GuppYUser5 sont cryptés pour la sécurité du contenu, avec la possibilité de changer la clé de cryptage pour l’éditeur du site.
Loi applicable et juridiction
Les présentes Mentions Légales sont régies par la loi française. En cas de différend et à défaut d'accord amiable, le litige sera porté devant les tribunaux français conformément aux règles de compétence en vigueur.
Contact
Pour tout signalement de contenus ou d'activités illicites sur ce site, l'utilisateur peut contacter l'éditeur par la page Contact de ce site ou par courrier recommandé avec accusé de réception adressé à l'éditeur aux coordonnées précisées dans les présentes mentions légales.
Un menu escamotable spécial Mobile
Ce menu, visible ci-contre, fonctionne à l'identique sur ce site même. Vous le verrez si vous le consultez sur un mobile.
C'est le mélange de deux astuces présentées ici :
Je vous invite à les consulter, au moins pour en connaitre les sources.
C'est suite à un post sur le forum de freeguppy.org, sur lequel je n'ai pas pu m'exprimer puisque je suis exclu définitivement de guppy -et, encore une fois, mon droit de réponse d'auteur et d'adaptateur est bafoué...- L'auteur (Luxman) évoquait pour un menu mobile, sur ce site une adaptation des boutons fixes déployables qu'il avait trouvée sur ce présent site en me citant. J'ai trouvé l'idée élégante et j'ai décidé de l'améliorer encore un peu en lui ajoutant les textes en accordéon. Merci à lui, en tout cas de m'avoir indirectement suggéré ce tutoriel.
Il est entièrement en CSS.
Ci-dessous le code de style (commenté le plus possible) qu'il est possible de mettre dans le fichier styleplus, ou mobstyle (RD mobile, puisque censé n'être mis en place que sur mobile)... ou au début de la boite libre dans laquelle il sera placé encadré par les balises ... . Ou encore, comme c'est le cas ici, dans une feuille de style dédiée.
Vous devrez adapter le chemin des images du(des) bouton(s) et éventuellement des images de nouveauté et de MAJ à votre configuration. Il est possible de ne placer qu'une image de bouton et dans ce cas de supprimer la règle #menu-deployable .Item:hover { ... }... et de remplacer les images de nouveauté et de MAJ par du texte : content: 'NEW'); color: #FF0000; par exemple. Vous pouvez remplacer selon le même principe les flèches en triangle placées devant les catégories (label).
#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:#f6f6f6; /* couleur de fond */
color:inherit; /* couleur du texte */
border:2px solid #616161; /* 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-menu*/
font-family: Verdana, sans-serif; /*police*/
font-size: 25px; /*taille police*/
line-height: 40px; /*hauteur ligne*/
padding-left: 10px; /*marge intérieure gauche*/
color: #ce662e; /*couleur texte*/
}
.md-bandeau-menu label{ /*attributs des titres-catégories*/
font-family: Verdana, sans-serif; /*police*/
font-size: 19px; /*taille police*/
line-height: 28px; /*hauteur ligne*/
padding: 5px 5px; /*marges intérieures*/
margin: 1px; /*marges extérieures*/
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; /*couleur texte*/
margin-right:5px; /*marge extérieure droite*/
}
.md-bandeau-menu label:hover::before { /*au survol pseudo classe image triangle droite avant*/
content: '►'; /*contenu*/
}
.md-bandeau-menu input:checked + label::before { /*sélectionné pseudo classe image triangle droite avant*/
content: '►'; /*contenu*/
color: #ebebeb; /*couleur texte*/
}
.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: #ffffff; /*couleur fond*/
margin-top: -5px; /*marge extérieure haute*/
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 paragraphes-liens*/
font-style: italic; /*à ajuster ou supprimer*/
color: #777777; /*couleur*/
font-size: 14px; /*taille police*/
line-height: 23px; /*hauteur ligne*/
margin:0; /*marges extérieures*/
padding: 8px 10px; /*marges intérieures*/
}
.md-bandeau-menu article p.new::after { /*pseudo classe image new après*/
content: url('images/new.png');
margin-left:5px;
}
.md-bandeau-menu article p.maj::after { /*pseudo classe image maj après*/
content: url('images/maj.png');
margin-left:5px;
}
.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*/
}
Si vous fixez ce bouton dans le style ci-dessus, il sera toujours présent (il faut donc choisir judicieusement sa place) et ce menu sera accessible à tout moment... ce qui peut être bien pratique sur un mobile... Mais, sur guppy, en fonction de l'affichage de certaines pages, le résultat est très imparfait... (page devant être "scrollée" horizontalement...). Personnellement, sur ce site, je ne l'ai pas fixé. Mais, sur un autre de mes sites : https://cuirs.71site.fr/ conçu avec le CMS adHoc le même type de menu, à droite sur mobile est fixé, et fonctionne de manière tout à fait satisfaisante.
Ci dessous le code d'intégration du bouton et du menu simplifié tel qu'il se présente ci-contre. A placer dans une boite libre. Notez bien que les liens présentés peuvent être internes ou externes au site... A vous de composer le menu qui vous semble le plus utile...
" target="_top">¤ ItemA1 (camera_interne)
" target="_blank">¤ ItemA2 (github_camera)
Ce sont les parties surlignées en blanc qu'il faudra adapter pour votre menu.
Le bouton est placé à droite (d'où float:right; ) : à modifier pour le placer à gauche, et donc également les différentes positions dans le style... (me contacter au besoin...)
La notion de survol est absente des mobiles. C'est donc au clic que réagira ce menu. Y compris pour le fermer (clic au dehors). Il ne se fermera donc pas tout seul, contrairement à cette version sur ordinateur, dès qu'on ne le survole plus. Pour permettre de naviguer dans ce menu, j'ai ajouté ce conteneur
qui permet de mettre en place un ascenseur vertical dès que le contenu dépasse 500px. Valeur à adapter évidemment...
Pas d'inquiétude sur l'imbrication du code. Une fois copié et collé, vous n'avez plus qu'à ajouter les titres, catégories (label) et items nécessaires, et ce, possible directement dans l'éditeur. Voir aussi comment insérer les classes .new et .maj. pour les items à mettre en évidence... là encore à adapter à vos besoins...
Il sera peut-être nécessaire de rendre transparent le fond de votre boite libre... Tout dépend de la position de cette boite, en MOBILE (et/ou en WEB si vous le souhaitez)... donc, pour cela et pour tout le reste...
N'hésitez pas à poster sur le forum de ce site pour plus d'informations ou d'aides, ou directement par courriel, via le Contact de ce site.
Un menu escamotable spécial Mobile
Ce menu, visible ci-contre, fonctionne à l'identique sur ce site même. Vous le verrez si vous le consultez sur un mobile.
C'est le mélange de deux astuces présentées ici :
Je vous invite à les consulter, au moins pour en connaitre les sources.
C'est suite à un post sur le forum de freeguppy.org, sur lequel je n'ai pas pu m'exprimer puisque je suis exclu définitivement de guppy -et, encore une fois, mon droit de réponse d'auteur et d'adaptateur est bafoué...- L'auteur (Luxman) évoquait pour un menu mobile, sur ce site une adaptation des boutons fixes déployables qu'il avait trouvée sur ce présent site en me citant. J'ai trouvé l'idée élégante et j'ai décidé de l'améliorer encore un peu en lui ajoutant les textes en accordéon. Merci à lui, en tout cas de m'avoir indirectement suggéré ce tutoriel.
Il est entièrement en CSS.
Ci-dessous le code de style (commenté le plus possible) qu'il est possible de mettre dans le fichier styleplus, ou mobstyle (RD mobile, puisque censé n'être mis en place que sur mobile)... ou au début de la boite libre dans laquelle il sera placé encadré par les balises ... . Ou encore, comme c'est le cas ici, dans une feuille de style dédiée.
Vous devrez adapter le chemin des images du(des) bouton(s) et éventuellement des images de nouveauté et de MAJ à votre configuration. Il est possible de ne placer qu'une image de bouton et dans ce cas de supprimer la règle #menu-deployable .Item:hover { ... }... et de remplacer les images de nouveauté et de MAJ par du texte : content: 'NEW'); color: #FF0000; par exemple. Vous pouvez remplacer selon le même principe les flèches en triangle placées devant les catégories (label).
#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:#f6f6f6; /* couleur de fond */
color:inherit; /* couleur du texte */
border:2px solid #616161; /* 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-menu*/
font-family: Verdana, sans-serif; /*police*/
font-size: 25px; /*taille police*/
line-height: 40px; /*hauteur ligne*/
padding-left: 10px; /*marge intérieure gauche*/
color: #ce662e; /*couleur texte*/
}
.md-bandeau-menu label{ /*attributs des titres-catégories*/
font-family: Verdana, sans-serif; /*police*/
font-size: 19px; /*taille police*/
line-height: 28px; /*hauteur ligne*/
padding: 5px 5px; /*marges intérieures*/
margin: 1px; /*marges extérieures*/
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; /*couleur texte*/
margin-right:5px; /*marge extérieure droite*/
}
.md-bandeau-menu label:hover::before { /*au survol pseudo classe image triangle droite avant*/
content: '►'; /*contenu*/
}
.md-bandeau-menu input:checked + label::before { /*sélectionné pseudo classe image triangle droite avant*/
content: '►'; /*contenu*/
color: #ebebeb; /*couleur texte*/
}
.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: #ffffff; /*couleur fond*/
margin-top: -5px; /*marge extérieure haute*/
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 paragraphes-liens*/
font-style: italic; /*à ajuster ou supprimer*/
color: #777777; /*couleur*/
font-size: 14px; /*taille police*/
line-height: 23px; /*hauteur ligne*/
margin:0; /*marges extérieures*/
padding: 8px 10px; /*marges intérieures*/
}
.md-bandeau-menu article p.new::after { /*pseudo classe image new après*/
content: url('images/new.png');
margin-left:5px;
}
.md-bandeau-menu article p.maj::after { /*pseudo classe image maj après*/
content: url('images/maj.png');
margin-left:5px;
}
.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*/
}
Si vous fixez ce bouton dans le style ci-dessus, il sera toujours présent (il faut donc choisir judicieusement sa place) et ce menu sera accessible à tout moment... ce qui peut être bien pratique sur un mobile... Mais, sur guppy, en fonction de l'affichage de certaines pages, le résultat est très imparfait... (page devant être "scrollée" horizontalement...). Personnellement, sur ce site, je ne l'ai pas fixé. Mais, sur un autre de mes sites : https://cuirs.71site.fr/ conçu avec le CMS adHoc le même type de menu, à droite sur mobile est fixé, et fonctionne de manière tout à fait satisfaisante.
Ci dessous le code d'intégration du bouton et du menu simplifié tel qu'il se présente ci-contre. A placer dans une boite libre. Notez bien que les liens présentés peuvent être internes ou externes au site... A vous de composer le menu qui vous semble le plus utile...
" target="_top">¤ ItemA1 (camera_interne)
" target="_blank">¤ ItemA2 (github_camera)
Ce sont les parties surlignées en blanc qu'il faudra adapter pour votre menu.
Le bouton est placé à droite (d'où float:right; ) : à modifier pour le placer à gauche, et donc également les différentes positions dans le style... (me contacter au besoin...)
La notion de survol est absente des mobiles. C'est donc au clic que réagira ce menu. Y compris pour le fermer (clic au dehors). Il ne se fermera donc pas tout seul, contrairement à cette version sur ordinateur, dès qu'on ne le survole plus. Pour permettre de naviguer dans ce menu, j'ai ajouté ce conteneur
qui permet de mettre en place un ascenseur vertical dès que le contenu dépasse 500px. Valeur à adapter évidemment...
Pas d'inquiétude sur l'imbrication du code. Une fois copié et collé, vous n'avez plus qu'à ajouter les titres, catégories (label) et items nécessaires, et ce, possible directement dans l'éditeur. Voir aussi comment insérer les classes .new et .maj. pour les items à mettre en évidence... là encore à adapter à vos besoins...
Il sera peut-être nécessaire de rendre transparent le fond de votre boite libre... Tout dépend de la position de cette boite, en MOBILE (et/ou en WEB si vous le souhaitez)... donc, pour cela et pour tout le reste...
N'hésitez pas à poster sur le forum de ce site pour plus d'informations ou d'aides, ou directement par courriel, via le Contact de ce site.
Fork pour changer les icones des options de menu
Vous avez sans doute remarqué les icones font-awesome utilisées désormais (depuis la version 5.03.00).
Certaines sont jolies... d'autres moins...
et notamment, les très laides (à mon point de vue ) icones en forme de porte ouverte ou fermée placées devant les catégories des options de menu (liste dynamique n°2)
On peut, à tout le moins, choisir la liste dynamique n°1 ( carré + et carré - ), moins disgracieuses.
On peut aussi remplacer l'une ou l'autre série par d'autres couples d'icones
Dans inc/func_boxes.php
lignes 3086 à 3095 (versions 5.03.00 / 5.03.01 / 5.03.02 ) ou lignes 3084 à 3093 (version 5.03.03) vous avez :
/**********************************************************************/ case "2" : // menu liste dynamique n°1 $openimg = 'far fa-plus-square'; $closeimg = 'far fa-minus-square'; /**********************************************************************/ case "3" : // menu liste dynamique n°2 if ($type_menu == "3") { $openimg = 'fas fa-door-closed'; $closeimg = 'fas fa-door-open'; }
Remplacer par (par exemple) :
$openimg = 'fas fa-chevron-down';
$closeimg = 'fas fa-chevron-up';
ou
$openimg = 'fas fa-arrow-circle-down';
$closeimg = 'fas fa-arrow-circle-up';
ou
$openimg = 'fas fa-arrow-right';
$closeimg = 'fas fa-arrow-up';
D'autres combinaisons sont possibles, bien sûr... Mais toutes les icones font-awesome ne sont pas, hélas, utilisables... Il y a quand même de quoi faire...
Bien sûr, à refaire si une prochaine version modifie inc/func_boxes.php
Pour toutes questions ou aides pour cette astuce, veuillez poster sur le forum de ce site.
Fork pour changer les icones des options de menu
Vous avez sans doute remarqué les icones font-awesome utilisées désormais (depuis la version 5.03.00).
Certaines sont jolies... d'autres moins...
et notamment, les très laides (à mon point de vue ) icones en forme de porte ouverte ou fermée placées devant les catégories des options de menu (liste dynamique n°2)
On peut, à tout le moins, choisir la liste dynamique n°1 ( carré + et carré - ), moins disgracieuses.
On peut aussi remplacer l'une ou l'autre série par d'autres couples d'icones
Dans inc/func_boxes.php
lignes 3086 à 3095 (versions 5.03.00 / 5.03.01 / 5.03.02 ) ou lignes 3084 à 3093 (version 5.03.03) vous avez :
/**********************************************************************/ case "2" : // menu liste dynamique n°1 $openimg = 'far fa-plus-square'; $closeimg = 'far fa-minus-square'; /**********************************************************************/ case "3" : // menu liste dynamique n°2 if ($type_menu == "3") { $openimg = 'fas fa-door-closed'; $closeimg = 'fas fa-door-open'; }
Remplacer par (par exemple) :
$openimg = 'fas fa-chevron-down';
$closeimg = 'fas fa-chevron-up';
ou
$openimg = 'fas fa-arrow-circle-down';
$closeimg = 'fas fa-arrow-circle-up';
ou
$openimg = 'fas fa-arrow-right';
$closeimg = 'fas fa-arrow-up';
D'autres combinaisons sont possibles, bien sûr... Mais toutes les icones font-awesome ne sont pas, hélas, utilisables... Il y a quand même de quoi faire...
Bien sûr, à refaire si une prochaine version modifie inc/func_boxes.php
Pour toutes questions ou aides pour cette astuce, veuillez poster sur le forum de ce site.
Fork pour "empêcher" la fermeture non souhaitée des boites menu
Peut-être avez-vous remarqué qu'une boite menu, déclarée statique par défaut se présente ouverte et nul signe de fermeture ne se situe sur son titre... Si c'est ce que l'on souhaite, c'est parfait...
Sauf que si on souhaite, en plus, des images de nouveauté (ou de MAJ) dans les options de menus...
eh bien dès l'apparition d'une imagette new ou maj... une icone de fermeture de la boite apparait à droite de son titre ! (avant la version 5.03.xx, en bas de la boite)
Pourquoi ? Mystère !... J'ai personnellement toujours considéré cela comme un couic, ou à tout le moins comme un défaut de conception...
Si vous avez constaté cette apparition et que celle-ci vous gêne...
Un fork est possible et très simple à mettre en oeuvre :
dans styleplus.css (accessible via Config Style) mettre
.dispArrow {display:none;}
plus d'icone (mais encore la possibilité de fermer la boite en cliquant à l'aveugle sur le bandeau du titre...)
Cela peut vous suffire.
Mais si vous souhaitez ne plus permettre ce clic, il faut "forker" le fichier inc/funcskin.inc
Versions 5.03.00 / 5.03.01 / 5.03.02 / 5.03.03
Cherchez la ligne 82
Cherchez 'none'
Remplacez par 'block'
'.$title.'
';
'.$title.'
';
Et le tour est joué...
Bien sûr, à refaire si une prochaine version modifie inc/funcskin.inc
PS : Tous mes sites (sauf démoskins, puisque sans images de nouveauté) font usage de ces modifications.
Pour toutes questions ou aides pour cette astuce, veuillez poster sur le forum de ce site.
Fork pour "empêcher" la fermeture non souhaitée des boites menu
Peut-être avez-vous remarqué qu'une boite menu, déclarée statique par défaut se présente ouverte et nul signe de fermeture ne se situe sur son titre... Si c'est ce que l'on souhaite, c'est parfait...
Sauf que si on souhaite, en plus, des images de nouveauté (ou de MAJ) dans les options de menus...
eh bien dès l'apparition d'une imagette new ou maj... une icone de fermeture de la boite apparait à droite de son titre ! (avant la version 5.03.xx, en bas de la boite)
Pourquoi ? Mystère !... J'ai personnellement toujours considéré cela comme un couic, ou à tout le moins comme un défaut de conception...
Si vous avez constaté cette apparition et que celle-ci vous gêne...
Un fork est possible et très simple à mettre en oeuvre :
dans styleplus.css (accessible via Config Style) mettre
.dispArrow {display:none;}
plus d'icone (mais encore la possibilité de fermer la boite en cliquant à l'aveugle sur le bandeau du titre...)
Cela peut vous suffire.
Mais si vous souhaitez ne plus permettre ce clic, il faut "forker" le fichier inc/funcskin.inc
Versions 5.03.00 / 5.03.01 / 5.03.02 / 5.03.03
Cherchez la ligne 82
Cherchez 'none'
Remplacez par 'block'
'.$title.'
';
'.$title.'
';
Et le tour est joué...
Bien sûr, à refaire si une prochaine version modifie inc/funcskin.inc
PS : Tous mes sites (sauf démoskins, puisque sans images de nouveauté) font usage de ces modifications.
Pour toutes questions ou aides pour cette astuce, veuillez poster sur le forum de ce site.
Utiliser Camera dans un diaporama ÉDITO "Mobile Friendly"
Le slider ci-dessous utilise les fonctions natives de Camera, et d'autres instructions qui lui permettent de générer une étiquette "thème" mais surtout une instruction en javascript lui permettant, en fonction de la taille de l'écran d'affichage, de placer le texte au dessous de l'image et non plus à sa droite : Ce slider devient donc "Mobile Friendly" ! Testez son affichage sur smartphone...
La demande initiale de ce travail a été faite par OMT (développeur du plugin "sommaire"), merci à lui de m'avoir fait chercher ces astuces...
Le code, ci-dessous est commenté le plus possible. Vous pouvez vous référer utilement au tutoriel initial de Camera afin d'en comprendre les différentes options.
Cette première partie est à placer dans le code source au début de l'article, de la page, de la boite libre...
.camera_wrap { /* bordure : epaisseur, nature, couleur, arrondi */
border: 0px solid rgb(255, 255, 255);
border-radius: 0px;
}
.camera_prev, .camera_next, .camera_commands { /*position navigation*/
top: 90%;
}
.camera_caption > div {
padding : 35% 10% 5% 10%; /*marges intérieures conteneur texte*/
}
.camera_caption { /*texte général*/
right:0; /*placement texte*/
display: block;
position: absolute;
width: 30%; /*largeur*/
background: rgba(25, 25, 25, 0.7); /*couleur de fond et opacité*/
color: rgb(255, 255, 255); /*couleur texte*/
font-family : Verdana, Arial, Helvetica, sans-serif; /*police*/
font-weight: 300; /*épaisseur police*/
font-size : 3.5rem; /*taille police*/
}
@media screen and (min-width: 760px), screen and (min-device-width: 760px) { /* au delà de 760px de largeur (WEB) */
.camera_caption { /*texte général*/
top:0; /* pour réserver la position en haut à cette disposition particulière*/
}
} /* fin dispositions min-width: 760px (WEB) */
.camera_caption theme { /*étiquette thème*/
position: absolute;
width:100%; /*largeur // à la zone caption*/
height:4rem; /*hauteur*/
border-radius:.5rem; /*arrondis*/
text-align:center; /*centrage texte*/
background: #FF0000; /*couleur de fond*/
color:#FFFF80; /*couleur texte*/
text-transform: lowercase; /*minuscules*/
font-weight: 200; /*épaisseur police*/
font-size : 3rem; /*taille police*/
top: 10%; /*position haut*/
left: -40%; /*position gauche*/
}
.camera_caption a { /*lien dans le texte*/
color: rgb(237, 135, 35); /*couleur texte*/
font-variant: small-caps; /*petites majuscules*/
font-weight: 100; /*épaisseur police*/
font-size : 2.5rem; /*taille police*/
padding-left:10%; /*marge intérieure gauche*/
}
.camera_caption a:hover { /*lien survolé dans le texte*/
color: rgb(237, 237, 0); /*couleur texte*/
text-decoration : underline; /*soulignage*/
}
.camera_wrap .camera_pag .camera_pag_ul { /* position des boutons de pagination */
text-align: center; /*centrage texte*/
}
.fluid_container { /* reglage max en largeur et % d'occupation */
margin: 0 auto; /*marges extérieures*/
max-width: 1000px; /* valeur maximum du container de Camera */
width: 100%; /*largeur*/
}
@media screen and (max-width: 760px), screen and (max-device-width: 760px) { /* inférieur à 760px de largeur (MOBILE)*/
.camera_prev, .camera_next, .camera_commands { /*position navigation*/
top: 10%;
}
.camera_caption > div {
padding : 5% 10% 5% 10%; /*marges intérieures conteneur texte*/
}
.camera_caption { /*texte général*/
bottom:0; /*placement texte*/
font-size : 3rem; /*taille police*/
width: 100%; /*largeur*/
height:50%; /*hauteur en % de la hauteur totale (image + caption) !!forcément inférieur à 100%!! */
}
.camera_caption theme { /*étiquette thème*/
width:50%; /*largeur // à la zone caption*/
top: -5%; /*position haut*/
left: 5%; /*position gauche*/
}
} /* fin dispositions max-width: 760px (MOBILE) */
if (window.matchMedia("(min-width: 760px)").matches) {
/* Pour écrans de dimension supérieure ou égale à 760 px de largeur (WEB)*/
jQuery(function(){ /* initialisation camera_wrap_1 */
jQuery('#camera_wrap_1').camera({
alignment : 'centerLeft', // alignement de l'image
hover : true, // true / false : pause au survol
loader : 'none', //Type de loader ou sans loader : pie, bar, none
fx : 'topLeftBottomRight, bottomRightTopLeft, simpleFade', //Type de transition
height: '52.5%', // ratio de l'affichage : H / L exprimé en %
time : 4000, //En millisecondes : entre la fin d'un effet et le début du suivant (temps d'affichage du loader s'il est présent)
transPeriod : 500, //Temps d'affichage d'une transition en millisecondes
pagination : true // true / false : présence des boutons de pagination
});
});
} else {
/* Pour écrans de dimension inférieure à 760 px de largeur (MOBILE) */
jQuery(function(){ /* initialisation camera_wrap_1 */
jQuery('#camera_wrap_1').camera({
alignment : 'topCenter', // alignement de l'image
navigationHover : false, //affichage permanent boutons de navigation
mobileNavHover : false, //affichage permanent boutons de navigation mobile (ces 2 lignes indispensables!!)
loader : 'none', //Type de loader ou sans loader : pie, bar, none
fx : 'topLeftBottomRight, bottomRightTopLeft, simpleFade', //Type de transition
height: '150%', // ratio des images : 100H/(100-%HauteurCaption)/L exprimé en %
time : 4000, //En millisecondes : entre la fin d'un effet et le début du suivant (temps d'affichage du loader s'il est présent)
transPeriod : 500, //Temps d'affichage d'une transition en millisecondes
pagination : true // true / false : présence des boutons de pagination
});
});
}
Dans la partie , les instructions @media screen permettent de modifier les réglages en fonction de la largeur d'affichage.
Dans la partie , l'instruction window.matchMedia permet de choisir quel script de Camera appeler en fonction de la largeur d'affichage.
C'est dans l'utilisation judicieuse de ces deux premières parties que réside l'aspect "Mobile Friendly" de ce dispositif.
Les images font 700*525px (ratio de 0.75) avec un affichage de la zone de texte à 30% en largeur, (évidemment 70% pour l'image) d'où height : '52.5%' en script Web (voir formule)
NB :
on pourrait imaginer une zone de texte à 28% (72% pour les mêmes images) et donc une nouvelle valeur de height à 54%...
on pourrait imaginer une zone de texte à 40% (60% pour les mêmes images) et donc une nouvelle valeur de height à 45%...
etc... en respectant le ratio image de 0.75.
En Mobile on souhaite ici 50% de la hauteur totale pour le texte, d'où height : '150%' en script Mobile (voir formule)
NB:
on pourrait imaginer un texte à 40% de la hauteur totale (60% restant en hauteur pour l'image avec les mêmes images)
[ donc une formule 100*525/(100-40)/700 = 1,25 ]
et donc une nouvelle valeur de height à 125%...
etc... en respectant le ratio image de 0.75.
La partie suivante : choix des images, textes, liens... est commune aux deux types d'affichage...
Cette seconde partie, est à placer dans le code source à l'endroit ou vous souhaitez l'affichage du slider Camera...
Les éléments surlignés en blanc sont à adapter à vos besoins...
Le chemin des images est à adapter à votre configuration... Ici, il y a des liens sur les images, mais ils peuvent être supprimés.
Les balises
servent à passer à la ligne.
Les balises ... servent, de manière classique, à placer des liens sur le texte placé entre ces deux balises.
Il sera peut-être nécessaire de rendre transparent le fond de votre boite libre... en édito... ou ailleurs... Tout dépend de la position de cette boite, en WEB et/ou en MOBILE... donc, pour cela et pour tout le reste...
N'hésitez pas à poster sur le forum de ce site pour plus d'informations ou d'aides.
Utiliser Camera dans un diaporama ÉDITO "Mobile Friendly"
Le slider ci-dessous utilise les fonctions natives de Camera, et d'autres instructions qui lui permettent de générer une étiquette "thème" mais surtout une instruction en javascript lui permettant, en fonction de la taille de l'écran d'affichage, de placer le texte au dessous de l'image et non plus à sa droite : Ce slider devient donc "Mobile Friendly" ! Testez son affichage sur smartphone...
La demande initiale de ce travail a été faite par OMT (développeur du plugin "sommaire"), merci à lui de m'avoir fait chercher ces astuces...
Le code, ci-dessous est commenté le plus possible. Vous pouvez vous référer utilement au tutoriel initial de Camera afin d'en comprendre les différentes options.
Cette première partie est à placer dans le code source au début de l'article, de la page, de la boite libre...
.camera_wrap { /* bordure : epaisseur, nature, couleur, arrondi */
border: 0px solid rgb(255, 255, 255);
border-radius: 0px;
}
.camera_prev, .camera_next, .camera_commands { /*position navigation*/
top: 90%;
}
.camera_caption > div {
padding : 35% 10% 5% 10%; /*marges intérieures conteneur texte*/
}
.camera_caption { /*texte général*/
right:0; /*placement texte*/
display: block;
position: absolute;
width: 30%; /*largeur*/
background: rgba(25, 25, 25, 0.7); /*couleur de fond et opacité*/
color: rgb(255, 255, 255); /*couleur texte*/
font-family : Verdana, Arial, Helvetica, sans-serif; /*police*/
font-weight: 300; /*épaisseur police*/
font-size : 3.5rem; /*taille police*/
}
@media screen and (min-width: 760px), screen and (min-device-width: 760px) { /* au delà de 760px de largeur (WEB) */
.camera_caption { /*texte général*/
top:0; /* pour réserver la position en haut à cette disposition particulière*/
}
} /* fin dispositions min-width: 760px (WEB) */
.camera_caption theme { /*étiquette thème*/
position: absolute;
width:100%; /*largeur // à la zone caption*/
height:4rem; /*hauteur*/
border-radius:.5rem; /*arrondis*/
text-align:center; /*centrage texte*/
background: #FF0000; /*couleur de fond*/
color:#FFFF80; /*couleur texte*/
text-transform: lowercase; /*minuscules*/
font-weight: 200; /*épaisseur police*/
font-size : 3rem; /*taille police*/
top: 10%; /*position haut*/
left: -40%; /*position gauche*/
}
.camera_caption a { /*lien dans le texte*/
color: rgb(237, 135, 35); /*couleur texte*/
font-variant: small-caps; /*petites majuscules*/
font-weight: 100; /*épaisseur police*/
font-size : 2.5rem; /*taille police*/
padding-left:10%; /*marge intérieure gauche*/
}
.camera_caption a:hover { /*lien survolé dans le texte*/
color: rgb(237, 237, 0); /*couleur texte*/
text-decoration : underline; /*soulignage*/
}
.camera_wrap .camera_pag .camera_pag_ul { /* position des boutons de pagination */
text-align: center; /*centrage texte*/
}
.fluid_container { /* reglage max en largeur et % d'occupation */
margin: 0 auto; /*marges extérieures*/
max-width: 1000px; /* valeur maximum du container de Camera */
width: 100%; /*largeur*/
}
@media screen and (max-width: 760px), screen and (max-device-width: 760px) { /* inférieur à 760px de largeur (MOBILE)*/
.camera_prev, .camera_next, .camera_commands { /*position navigation*/
top: 10%;
}
.camera_caption > div {
padding : 5% 10% 5% 10%; /*marges intérieures conteneur texte*/
}
.camera_caption { /*texte général*/
bottom:0; /*placement texte*/
font-size : 3rem; /*taille police*/
width: 100%; /*largeur*/
height:50%; /*hauteur en % de la hauteur totale (image + caption) !!forcément inférieur à 100%!! */
}
.camera_caption theme { /*étiquette thème*/
width:50%; /*largeur // à la zone caption*/
top: -5%; /*position haut*/
left: 5%; /*position gauche*/
}
} /* fin dispositions max-width: 760px (MOBILE) */
if (window.matchMedia("(min-width: 760px)").matches) {
/* Pour écrans de dimension supérieure ou égale à 760 px de largeur (WEB)*/
jQuery(function(){ /* initialisation camera_wrap_1 */
jQuery('#camera_wrap_1').camera({
alignment : 'centerLeft', // alignement de l'image
hover : true, // true / false : pause au survol
loader : 'none', //Type de loader ou sans loader : pie, bar, none
fx : 'topLeftBottomRight, bottomRightTopLeft, simpleFade', //Type de transition
height: '52.5%', // ratio de l'affichage : H / L exprimé en %
time : 4000, //En millisecondes : entre la fin d'un effet et le début du suivant (temps d'affichage du loader s'il est présent)
transPeriod : 500, //Temps d'affichage d'une transition en millisecondes
pagination : true // true / false : présence des boutons de pagination
});
});
} else {
/* Pour écrans de dimension inférieure à 760 px de largeur (MOBILE) */
jQuery(function(){ /* initialisation camera_wrap_1 */
jQuery('#camera_wrap_1').camera({
alignment : 'topCenter', // alignement de l'image
navigationHover : false, //affichage permanent boutons de navigation
mobileNavHover : false, //affichage permanent boutons de navigation mobile (ces 2 lignes indispensables!!)
loader : 'none', //Type de loader ou sans loader : pie, bar, none
fx : 'topLeftBottomRight, bottomRightTopLeft, simpleFade', //Type de transition
height: '150%', // ratio des images : 100H/(100-%HauteurCaption)/L exprimé en %
time : 4000, //En millisecondes : entre la fin d'un effet et le début du suivant (temps d'affichage du loader s'il est présent)
transPeriod : 500, //Temps d'affichage d'une transition en millisecondes
pagination : true // true / false : présence des boutons de pagination
});
});
}
Dans la partie , les instructions @media screen permettent de modifier les réglages en fonction de la largeur d'affichage.
Dans la partie , l'instruction window.matchMedia permet de choisir quel script de Camera appeler en fonction de la largeur d'affichage.
C'est dans l'utilisation judicieuse de ces deux premières parties que réside l'aspect "Mobile Friendly" de ce dispositif.
Les images font 700*525px (ratio de 0.75) avec un affichage de la zone de texte à 30% en largeur, (évidemment 70% pour l'image) d'où height : '52.5%' en script Web (voir formule)
NB :
on pourrait imaginer une zone de texte à 28% (72% pour les mêmes images) et donc une nouvelle valeur de height à 54%...
on pourrait imaginer une zone de texte à 40% (60% pour les mêmes images) et donc une nouvelle valeur de height à 45%...
etc... en respectant le ratio image de 0.75.
En Mobile on souhaite ici 50% de la hauteur totale pour le texte, d'où height : '150%' en script Mobile (voir formule)
NB:
on pourrait imaginer un texte à 40% de la hauteur totale (60% restant en hauteur pour l'image avec les mêmes images)
[ donc une formule 100*525/(100-40)/700 = 1,25 ]
et donc une nouvelle valeur de height à 125%...
etc... en respectant le ratio image de 0.75.
La partie suivante : choix des images, textes, liens... est commune aux deux types d'affichage...
Cette seconde partie, est à placer dans le code source à l'endroit ou vous souhaitez l'affichage du slider Camera...
Les éléments surlignés en blanc sont à adapter à vos besoins...
Le chemin des images est à adapter à votre configuration... Ici, il y a des liens sur les images, mais ils peuvent être supprimés.
Les balises
servent à passer à la ligne.
Les balises ... servent, de manière classique, à placer des liens sur le texte placé entre ces deux balises.
Il sera peut-être nécessaire de rendre transparent le fond de votre boite libre... en édito... ou ailleurs... Tout dépend de la position de cette boite, en WEB et/ou en MOBILE... donc, pour cela et pour tout le reste...
N'hésitez pas à poster sur le forum de ce site pour plus d'informations ou d'aides.
Feature Carousel
un carousel jQuery, qui peut être intégré au coeur de GuppY, ou bien être utilisé dans un Iframe.
Ce carousel est une création de Brian Osborne : https://www.bkosborne.com
Il est édité sous la licence GPLv3.
Son fonctionnement est identique à ce que son auteur a prévu. J'ai ajouté l'option de réglage de l'opacité des images latérales et j'ai adapté le tout pour son intégration dans GuppY et/ou des Iframes.
Le zip d'intégration est téléchargeable ici.
Attention, ce zip a changé : avec la version 5.03.00 de GuppY, l'ancienne installation ne fonctionne plus !
Si vous aviez installé Feature Carousel avant et qu'il ne fonctionne plus : Supprimez sans remord par FTP :
¤ le fichier jquery.featureCarousel.js dans le dossier inc/jshead de GuppY
¤ le fichier feature-carousel.css dans le dossier inc/csshead de GuppY
¤ le dossier NavFeature (et son contenu) placé dans le dossier img de GuppY.
Vous pouvez installer ce nouveau zip avec la fonction Installer dans l'admin de GuppY ou bien décompresser le zip et envoyer par FTP le dossier FeatureCarousel et son contenu dans le dossier photo de GuppY.
Dans ce dossier FeatureCarousel, il y a
* le dossier js qui contient les fichiers jquery.featureCarousel.js, jquery-1.8.3.js,
* le dossier css qui contient le fichier feature-carousel.css,
* le dossiers images qui contient quelques flèches de navigation (vous pouvez ajouter les vôtres et adapter...)
NB: c'est exactement le même contenu et au même endroit que le zip de Feature Carousel dans des Iframes, ceci dans un but de simplification de l'ensemble...
Quelques modifications ont été mises en place suite à ce nouveau mode d'installation. Elles sont dans les codes ci-dessous.
Si vous souhaitez réparer un carousel mis en place avant 5.03.00 et qui ne fonctionne plus, inspirez-vous de ce tutoriel et des codes ci-dessous, et n'hésitez surtout pas à poster sur ce forum si vous rencontrez la moindre difficulté...
Il est possible de créer des liens sur les images et sur les titres (légendes). Des réglages sont possibles et assez nombreux dans le style et le script du carousel. Il serait possible d'afficher plusieurs carousels Feature sur la même page, mais ceux-ci devraient avoir exactement les mêmes caractéristiques. Dans les exemples de l'article suivant, les carousels sont dans des Iframes, ce qui permet d'obtenir des effets différents à chaque fois.
Ci-dessous, Une bonne partie des réglages est opérationnelle, il fonctionne avec une pause au survol d'une image. Un clic sur une image latérale l'amène au centre.
Ci-dessous, le code utilisé : Une première partie : ...<... /script> (obligatoire !), et est à copier et coller au début du code source de l'article, de la boite libre, en y faisant les ajustements souhaités -cette partie est commentée le plus possible-.
.carousel-container { /*attribut du conteneur*/
width:650px; /*largeur*/
margin:5px auto; /*marges extérieures -auto pour centrer en largeur-*/
}
#carousel { /*attribut du carousel*/
height:260px; /*hauteur*/
width:650px; /*même largeur que ci-dessus*/
background:#CCCCCC; /*couleur de fond*/
font-size:12px; /*taille de caractère*/
font-family: Arial; /*police de caractère*/
}
.carousel-image {
border:1px solid #5d5d5d; /*bordure des images épaisseur - nature - couleur*/
}
.carousel-feature {
border:0px; /*IMPORTANT !! NE PAS ENLEVER POUR LA REGLE CI-DESSUS !!*/
}
.carousel-feature .carousel-caption { /*attribut des légendes*/
bottom:0px; /*position en bas*/
left:0px; /*position à gauche*/
width:100%; /*% d'occupation de l'image*/
background: rgba(100, 100, 100, .8); /*couleur de fond +opacité*/
}
.carousel-feature .carousel-caption p { /*attribut du paragraphe des légendes*/
margin:-15px 0; /*marges extérieures HB DG*/
padding:0 5px; /*marges intérieures HB DG*/
font-weight:bold; /*type de caractère bold - normal*/
font-size:12px; /*taille de caractère*/
color:#FFFFFF; /*couleur des caractères*/
background:transparent; /*couleur de fond du paragraphe*/
}
.carousel-feature .carousel-caption p a { /lien dans les paragraphes*/
color:#FFFF00; /*couleur des caractères*/
font-weight:bold; /*type de caractère bold - normal*/
}
.carousel-feature .carousel-caption p a:hover { /lien survolé dans les paragraphes*/
color:#FFAE5E; /*couleur des caractères*/
font-weight:bold; /*type de caractère bold - normal*/
}
.tracker-summation-container { /*attribut du conteneur pagination résumée 1 of ...*/
color:#FFFFFF; /*couleur des caractères*/
left:20px; /*position*/
top:240px; /*position*/
padding: 0 2px; /*marges intérieures*/
margin: 0 -4px; /*marges extérieures*/
background:#000000; /*couleur de fond*/
}
.tracker-individual-container { /*attribut du conteneur pagination individuelle*/
color:#FFFFFF; /*couleur des caractères*/
right:20px; /*position*/
top:240px; /*position*/
padding:0; /*marges intérieures*/
margin:0; /*marges extérieures*/
}
.tracker-individual-container .tracker-individual-blip { /*attribut des numéros de pagination individuelle*/
margin: 0 -4px; /*marges extérieures*/
padding: 0 2px; /*marges intérieures*/
color:#5B5B5B; /*couleur des caractères*/
text-align:center;
background:#E1E1E1; /*couleur de fond*/
}
.tracker-individual-container .tracker-individual-blip-selected { /*attribut du numéro de pagination individuelle sélectionné*/
color:#FFFFFF; /*couleur des caractères*/
font-weight:bold; /*type de caractère bold - normal*/
background:#000000; /*couleur de fond*/
}
#carousel-left { /*position du bouton de navigation gauche*/
bottom:25px;
left:280px;
}
#carousel-right { /*position du bouton de navigation droit*/
bottom:25px;
right:280px;
}
$(document).ready(function() {
var carousel = $("#carousel").featureCarousel({
// Pour les options :
// Utilisez les quotes uniquement pour les variables "chaine de caractères"
// une virgule après chaque option, sauf pour la dernière
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
$.fn.featureCarousel.defaults = {
largeFeatureWidth : 0, // Image centrale, valeur mise à 0 = dimensions originales. Entre 0 et 1 = sert de coefficient multiplicateur
largeFeatureHeight: 0, // des dimensions originales. Plus grand que 1 = mettre les valeurs souhaitées en pixels fixes pour toutes les images
smallFeatureWidth: .7, // coefficient multiplicateur pour les images latérales
smallFeatureHeight: .7, // coefficient multiplicateur pour les images latérales
smallFeatureOpacity: 0.6, // opacité des images latérales
topPadding: 5, // marge haute intérieure du carousel
sidePadding: 10, // marges latérales intérieures du carousel
smallFeatureOffset: 50, // marges hautes supplémentaires pour les images latérales du carousel
startingFeature: 1, // item au démarrage du carousel
carouselSpeed: 1000, // temps en millisecondes de la transition
autoPlay: 4000, // temps de l'affichage en millisecondes, peut être négatif=inverse le sens, 0 pour désactiver l'autoplay
pauseOnHover: true, // avec l'autoplay, pause au survol (true or false)
stopOnHover: false, // avec l'autoplay, stop au survol (false or true)
trackerIndividual: true, // numéro de pagination (true or false)
trackerSummation: true, // affichage du type pagination résumée "2 of 8" (true or false)
preload: true, // préchargement de toutes les images avant (peut être long...) (true or false)
leftButtonTag: '#carousel-left', // sélecteur pour la flèche gauche du carousel
rightButtonTag: '#carousel-right', // sélecteur pour la flèche droite du carousel
animationEasing: 'swing', // type d'animation de la transition : linear, easeInOutCubic, easeInExpo... voir ici par exemple : https://easings.net/fr
captionBelow: false, // place la légende SOUS l'image (true or false)
// IMPORTANT : Ne pas modifier
movedToCenter: $.noop, // callback function for when a feature has animated to the center
leavingCenter: $.noop, // callback function for when feature left center
clickedCenter: $.noop // callback function for when center feature was clicked
};
Une seconde partie qui correspond au corps du carousel est à placer à l'endroit souhaité. Dans l'éditeur de GuppY, vous pourrez régler les textes des légendes, les liens dans celles-ci, et/ou sur les images.
Les images utilisées sont -sur ce site- dans un dossier photo/imagesFeatureC, à vous d'adapter les vôtres. La stucture (à copier-coller et adapter, notamment au niveau des liens...) de ce code est globalement celle-ci:
Notez que les différentes séries de flèches de navigation sont situées dans le dossier photo/FeatureCarousel/images. Vous pouvez ajouter les vôtres, puis adapter "carousel-left" et "carousel-right" à la fin du code du carousel.
Si vous souhaitez afficher ce type de carousel dans un Iframes, regardez ici. Les réglages sont, à très peu d'éléments près, les mêmes.
Pour toute question ou aide afin d'utiliser ce type de carousel, veuillez poster sur le forum de ce site.
Feature Carousel
un carousel jQuery, qui peut être intégré au coeur de GuppY, ou bien être utilisé dans un Iframe.
Ce carousel est une création de Brian Osborne : https://www.bkosborne.com
Il est édité sous la licence GPLv3.
Son fonctionnement est identique à ce que son auteur a prévu. J'ai ajouté l'option de réglage de l'opacité des images latérales et j'ai adapté le tout pour son intégration dans GuppY et/ou des Iframes.
Le zip d'intégration est téléchargeable ici.
Attention, ce zip a changé : avec la version 5.03.00 de GuppY, l'ancienne installation ne fonctionne plus !
Si vous aviez installé Feature Carousel avant et qu'il ne fonctionne plus : Supprimez sans remord par FTP :
¤ le fichier jquery.featureCarousel.js dans le dossier inc/jshead de GuppY
¤ le fichier feature-carousel.css dans le dossier inc/csshead de GuppY
¤ le dossier NavFeature (et son contenu) placé dans le dossier img de GuppY.
Vous pouvez installer ce nouveau zip avec la fonction Installer dans l'admin de GuppY ou bien décompresser le zip et envoyer par FTP le dossier FeatureCarousel et son contenu dans le dossier photo de GuppY.
Dans ce dossier FeatureCarousel, il y a
* le dossier js qui contient les fichiers jquery.featureCarousel.js, jquery-1.8.3.js,
* le dossier css qui contient le fichier feature-carousel.css,
* le dossiers images qui contient quelques flèches de navigation (vous pouvez ajouter les vôtres et adapter...)
NB: c'est exactement le même contenu et au même endroit que le zip de Feature Carousel dans des Iframes, ceci dans un but de simplification de l'ensemble...
Quelques modifications ont été mises en place suite à ce nouveau mode d'installation. Elles sont dans les codes ci-dessous.
Si vous souhaitez réparer un carousel mis en place avant 5.03.00 et qui ne fonctionne plus, inspirez-vous de ce tutoriel et des codes ci-dessous, et n'hésitez surtout pas à poster sur ce forum si vous rencontrez la moindre difficulté...
Il est possible de créer des liens sur les images et sur les titres (légendes). Des réglages sont possibles et assez nombreux dans le style et le script du carousel. Il serait possible d'afficher plusieurs carousels Feature sur la même page, mais ceux-ci devraient avoir exactement les mêmes caractéristiques. Dans les exemples de l'article suivant, les carousels sont dans des Iframes, ce qui permet d'obtenir des effets différents à chaque fois.
Ci-dessous, Une bonne partie des réglages est opérationnelle, il fonctionne avec une pause au survol d'une image. Un clic sur une image latérale l'amène au centre.
Ci-dessous, le code utilisé : Une première partie : ...<... /script> (obligatoire !), et est à copier et coller au début du code source de l'article, de la boite libre, en y faisant les ajustements souhaités -cette partie est commentée le plus possible-.
.carousel-container { /*attribut du conteneur*/
width:650px; /*largeur*/
margin:5px auto; /*marges extérieures -auto pour centrer en largeur-*/
}
#carousel { /*attribut du carousel*/
height:260px; /*hauteur*/
width:650px; /*même largeur que ci-dessus*/
background:#CCCCCC; /*couleur de fond*/
font-size:12px; /*taille de caractère*/
font-family: Arial; /*police de caractère*/
}
.carousel-image {
border:1px solid #5d5d5d; /*bordure des images épaisseur - nature - couleur*/
}
.carousel-feature {
border:0px; /*IMPORTANT !! NE PAS ENLEVER POUR LA REGLE CI-DESSUS !!*/
}
.carousel-feature .carousel-caption { /*attribut des légendes*/
bottom:0px; /*position en bas*/
left:0px; /*position à gauche*/
width:100%; /*% d'occupation de l'image*/
background: rgba(100, 100, 100, .8); /*couleur de fond +opacité*/
}
.carousel-feature .carousel-caption p { /*attribut du paragraphe des légendes*/
margin:-15px 0; /*marges extérieures HB DG*/
padding:0 5px; /*marges intérieures HB DG*/
font-weight:bold; /*type de caractère bold - normal*/
font-size:12px; /*taille de caractère*/
color:#FFFFFF; /*couleur des caractères*/
background:transparent; /*couleur de fond du paragraphe*/
}
.carousel-feature .carousel-caption p a { /lien dans les paragraphes*/
color:#FFFF00; /*couleur des caractères*/
font-weight:bold; /*type de caractère bold - normal*/
}
.carousel-feature .carousel-caption p a:hover { /lien survolé dans les paragraphes*/
color:#FFAE5E; /*couleur des caractères*/
font-weight:bold; /*type de caractère bold - normal*/
}
.tracker-summation-container { /*attribut du conteneur pagination résumée 1 of ...*/
color:#FFFFFF; /*couleur des caractères*/
left:20px; /*position*/
top:240px; /*position*/
padding: 0 2px; /*marges intérieures*/
margin: 0 -4px; /*marges extérieures*/
background:#000000; /*couleur de fond*/
}
.tracker-individual-container { /*attribut du conteneur pagination individuelle*/
color:#FFFFFF; /*couleur des caractères*/
right:20px; /*position*/
top:240px; /*position*/
padding:0; /*marges intérieures*/
margin:0; /*marges extérieures*/
}
.tracker-individual-container .tracker-individual-blip { /*attribut des numéros de pagination individuelle*/
margin: 0 -4px; /*marges extérieures*/
padding: 0 2px; /*marges intérieures*/
color:#5B5B5B; /*couleur des caractères*/
text-align:center;
background:#E1E1E1; /*couleur de fond*/
}
.tracker-individual-container .tracker-individual-blip-selected { /*attribut du numéro de pagination individuelle sélectionné*/
color:#FFFFFF; /*couleur des caractères*/
font-weight:bold; /*type de caractère bold - normal*/
background:#000000; /*couleur de fond*/
}
#carousel-left { /*position du bouton de navigation gauche*/
bottom:25px;
left:280px;
}
#carousel-right { /*position du bouton de navigation droit*/
bottom:25px;
right:280px;
}
$(document).ready(function() {
var carousel = $("#carousel").featureCarousel({
// Pour les options :
// Utilisez les quotes uniquement pour les variables "chaine de caractères"
// une virgule après chaque option, sauf pour la dernière
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
$.fn.featureCarousel.defaults = {
largeFeatureWidth : 0, // Image centrale, valeur mise à 0 = dimensions originales. Entre 0 et 1 = sert de coefficient multiplicateur
largeFeatureHeight: 0, // des dimensions originales. Plus grand que 1 = mettre les valeurs souhaitées en pixels fixes pour toutes les images
smallFeatureWidth: .7, // coefficient multiplicateur pour les images latérales
smallFeatureHeight: .7, // coefficient multiplicateur pour les images latérales
smallFeatureOpacity: 0.6, // opacité des images latérales
topPadding: 5, // marge haute intérieure du carousel
sidePadding: 10, // marges latérales intérieures du carousel
smallFeatureOffset: 50, // marges hautes supplémentaires pour les images latérales du carousel
startingFeature: 1, // item au démarrage du carousel
carouselSpeed: 1000, // temps en millisecondes de la transition
autoPlay: 4000, // temps de l'affichage en millisecondes, peut être négatif=inverse le sens, 0 pour désactiver l'autoplay
pauseOnHover: true, // avec l'autoplay, pause au survol (true or false)
stopOnHover: false, // avec l'autoplay, stop au survol (false or true)
trackerIndividual: true, // numéro de pagination (true or false)
trackerSummation: true, // affichage du type pagination résumée "2 of 8" (true or false)
preload: true, // préchargement de toutes les images avant (peut être long...) (true or false)
leftButtonTag: '#carousel-left', // sélecteur pour la flèche gauche du carousel
rightButtonTag: '#carousel-right', // sélecteur pour la flèche droite du carousel
animationEasing: 'swing', // type d'animation de la transition : linear, easeInOutCubic, easeInExpo... voir ici par exemple : https://easings.net/fr
captionBelow: false, // place la légende SOUS l'image (true or false)
// IMPORTANT : Ne pas modifier
movedToCenter: $.noop, // callback function for when a feature has animated to the center
leavingCenter: $.noop, // callback function for when feature left center
clickedCenter: $.noop // callback function for when center feature was clicked
};
Une seconde partie qui correspond au corps du carousel est à placer à l'endroit souhaité. Dans l'éditeur de GuppY, vous pourrez régler les textes des légendes, les liens dans celles-ci, et/ou sur les images.
Les images utilisées sont -sur ce site- dans un dossier photo/imagesFeatureC, à vous d'adapter les vôtres. La stucture (à copier-coller et adapter, notamment au niveau des liens...) de ce code est globalement celle-ci:
Notez que les différentes séries de flèches de navigation sont situées dans le dossier photo/FeatureCarousel/images. Vous pouvez ajouter les vôtres, puis adapter "carousel-left" et "carousel-right" à la fin du code du carousel.
Si vous souhaitez afficher ce type de carousel dans un Iframes, regardez ici. Les réglages sont, à très peu d'éléments près, les mêmes.
Pour toute question ou aide afin d'utiliser ce type de carousel, veuillez poster sur le forum de ce site.
Des images qui changent lors du survol de la souris
avec des effets variés (transformations, rotations, translations...)
Ces 10 propositions ci-dessous sont issues de ce site :
https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ (auteur : Alessio Atzeni)
info licence : https://tympanus.net/codrops/licensing/
Tout est téléchargeable sur le site, c'est très pratique, et le tutoriel (en anglais) est très bien fait. Je me suis juste contenté de jouer avec et de modifier à la marge les propositions. J'ai pu ajouter aussi au script original le fait de pouvoir mettre des images dans le contenu qui apparait au survol. () Une mise à jour permet d'augmenter ses possibilités.
Hover Style #1
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #2
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #3
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #4
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #5
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #6
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #7
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #8
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #9
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #10
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Hover Style #9bis
Une autre image de cet effet pour montrer les angles de rotation : ici 76° et -14°. Voir plus bas dans l'article le code et la méthode de calcul.
Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css.
Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises au début du code source et à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant en adaptant les contenus, bien sûr. Ces codes sont très proches les uns des autres à part pour le #9.
Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Notez l'id="front-img" pour bien différencier l'image du devant et celle(s) que vous pourriez ajouter dans le contenu "caché". Les lignes surlignées en jaune ne servent qu'à placer les images de ce tutoriel dans le flux ou à les faire retourner à la ligne. Mes images sont dans un dossier images placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration.
Pour montrer l'utilisation d'autres images avec des formats différents et notamment pour l'effet #9, j'ai ajouté une image rectangulaire et son code complet associé #9bis. Notez les classes .view0 pour cet exemple afin de le différencier de la série précédente avec .view et les afficher dans la même page. L'image fait 400x100px. Il y a deux angles à calculer pour les rotations des masques (ICI, un rappel de la méthode trigonométrique de calcul). Donc un angle au sommet dont la tangente est de 400/100, ce qui correspond dans une table trigonométrique, ou avec la calculatrice scientifique à 75,96...° soit environ 76°. L'angle à la base mesure donc 90°-76° = 14°. Ce sont ces valeurs qui sont utilisées dans le code ci-dessus.
ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.
À la demande d'Aramise, qui souhaitait ajouter une image de nouveauté ou du texte en superposition d'une image front-img pour signaler qu'un changement avait eu lieu sur la face cachée, j'ai proposé cette petite astuce, très simple à mettre en place.
Dans le corps du code, vous avez, par exemple :
Il suffit d'ajouter le bout de code à la suite de l'image front-img, et vous réglez la position comme vous le souhaitez (ici 10 px en bas et à droite). C'est l'effet qui est en place dans l'image démo 1.
Aramise a trouvé une solution texte clignotant que je vous livre également. Un peu plus complexe, elle nécessite l'ajout de règles de style dans le style commun par exemple :
.MESSAGE {
position: absolute;
right: 2%;
top: 10%;
width: 100%;
text-align: right;
font-size: 26px;
color: #FF0000;
font-weight: bold;
animation-name: animationMESSAGE;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes animationMESSAGE {
0%{opacity: 1;}
50%{opacity: 0;}
100%{opacity: 1;}
}
Et dans le code souhaité, compléter ainsi :
C'est l'effet qui est en place dans l'image démo 2.
L'avantage de cette astuce est que l'on peut mettre le texte souhaité. L'inconvénient est que la règle installe la position pour toutes les images. Les deux solutions peuvent évidemment cohabiter...
Amusez-vous bien...
Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.
Des images qui changent lors du survol de la souris
avec des effets variés (transformations, rotations, translations...)
Ces 10 propositions ci-dessous sont issues de ce site :
https://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/ (auteur : Alessio Atzeni)
info licence : https://tympanus.net/codrops/licensing/
Tout est téléchargeable sur le site, c'est très pratique, et le tutoriel (en anglais) est très bien fait. Je me suis juste contenté de jouer avec et de modifier à la marge les propositions. J'ai pu ajouter aussi au script original le fait de pouvoir mettre des images dans le contenu qui apparait au survol. () Une mise à jour permet d'augmenter ses possibilités.
Hover Style #1
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #2
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #3
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #4
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #5
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #6
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #7
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #8
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #9
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Lire plusHover Style #10
Un contenu, dans lequel on place du texte, des liens, des images. Il est modifiable dans l'éditeur de GuppY.
Hover Style #9bis
Une autre image de cet effet pour montrer les angles de rotation : ici 76° et -14°. Voir plus bas dans l'article le code et la méthode de calcul.
Les codes utilisés sont ci-dessous.
Le contenu du premier onglet : Style commun est obligatoire, soit au début du code source de l'article ou de la boite libre, soit dans styleplus.css.
Ensuite, ajouter au même endroit les codes correspondant aux effets souhaités, en adaptant à l'aide des quelques commentaires.
ATTENTION, si le style n'est pas dans styleplus.css, il faut placer les balises au début du code source et à la fin du style.
Puis dans le code source du corps de l'article ou de la boite libre, là où vous souhaitez placer les images, insérez le code correspondant en adaptant les contenus, bien sûr. Ces codes sont très proches les uns des autres à part pour le #9.
Dans les codes du corps de l'article ci-dessus, seules les lignes surlignées en vert sont obligatoires. Notez l'id="front-img" pour bien différencier l'image du devant et celle(s) que vous pourriez ajouter dans le contenu "caché". Les lignes surlignées en jaune ne servent qu'à placer les images de ce tutoriel dans le flux ou à les faire retourner à la ligne. Mes images sont dans un dossier images placé dans le dossier img à la racine de GuppY. Il faut évidemment adapter les sources à votre configuration.
Pour montrer l'utilisation d'autres images avec des formats différents et notamment pour l'effet #9, j'ai ajouté une image rectangulaire et son code complet associé #9bis. Notez les classes .view0 pour cet exemple afin de le différencier de la série précédente avec .view et les afficher dans la même page. L'image fait 400x100px. Il y a deux angles à calculer pour les rotations des masques (ICI, un rappel de la méthode trigonométrique de calcul). Donc un angle au sommet dont la tangente est de 400/100, ce qui correspond dans une table trigonométrique, ou avec la calculatrice scientifique à 75,96...° soit environ 76°. L'angle à la base mesure donc 90°-76° = 14°. Ce sont ces valeurs qui sont utilisées dans le code ci-dessus.
ATTENTION : Sur les écrans tactiles, smartphones, tablettes... l'effet de survol, évidemment ne fonctionne pas et il faut "cliquer" pour déclencher l'effet.
À la demande d'Aramise, qui souhaitait ajouter une image de nouveauté ou du texte en superposition d'une image front-img pour signaler qu'un changement avait eu lieu sur la face cachée, j'ai proposé cette petite astuce, très simple à mettre en place.
Dans le corps du code, vous avez, par exemple :
Il suffit d'ajouter le bout de code à la suite de l'image front-img, et vous réglez la position comme vous le souhaitez (ici 10 px en bas et à droite). C'est l'effet qui est en place dans l'image démo 1.
Aramise a trouvé une solution texte clignotant que je vous livre également. Un peu plus complexe, elle nécessite l'ajout de règles de style dans le style commun par exemple :
.MESSAGE {
position: absolute;
right: 2%;
top: 10%;
width: 100%;
text-align: right;
font-size: 26px;
color: #FF0000;
font-weight: bold;
animation-name: animationMESSAGE;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes animationMESSAGE {
0%{opacity: 1;}
50%{opacity: 0;}
100%{opacity: 1;}
}
Et dans le code souhaité, compléter ainsi :
C'est l'effet qui est en place dans l'image démo 2.
L'avantage de cette astuce est que l'on peut mettre le texte souhaité. L'inconvénient est que la règle installe la position pour toutes les images. Les deux solutions peuvent évidemment cohabiter...
Amusez-vous bien...
Me contacter sur le forum de ce site pour toute question ou aide pour utiliser ces procédures.
Un menu Grande Contenance
Ce menu est proposé sur ce site : https://www.outils-web.com
Je l'ai un peu adapté, quelquefois simplifié son style, et commenté afin de l'utiliser plus facilement. Il fonctionne dans la barre menu de ce site. Il est à réserver à un affichage sur ordinateur ou tablette : il n'est pas responsive et son affichage ne serait pas correct sur un smartphone.
- Accueil
Bienvenue !
Voici quelques possibilités du Menu à Grande Contenance.
Ses items sont organisés avec des largeurs et des dispositions différentes.
Les liens présentés sont là pour l'exemple.Navigateurs
Les navigateurs testés l'affichent correctement !
- 4 Colonnes
Exemple de listes de liens
Images libres
Polices
GIFS animés
Texte aléatoire
- 3 Colonnes
Exemple de listes de liens (logiciels)
Utilitaires
Exemple de mise en page avec images
La plupart des logiciels présentés ci-dessus sont des logiciels dits "libres" ou "open source". Tous sont gratuits. En savoir plus avec un annuaire...
D'autres, sont des "freewares" : gratuits, certes mais non-libres et non-open source. En savoir plus...
- 5 Colonnes
Exemple de mise en page sur 5 colonnes
Boite arrière plan foncé, class=BoiteArrPlan.
Imaginez-vous ce qu'il découvrirait dans la direction opposée !Aussitôt, elle chancela un peu, madame ; tant de choses naïves et singulières à lire sur mon visage de ce qui allait arriver.
Incapable ou criminel, monsieur, c'est : pourquoi l'homme noble n'est pas en état de nous nuire.
Apportez-moi de bonnes idées, et des choses visqueuses.
Avouons toutefois qu'avec fidélité ils se battent une seconde, j'en eus honte toute ma vie !
Texte aléatoire EnneagonExemple de mise en page sur 5 colonnes (suite)
Même si on se ment, je sais que, grâce à ma propre vérité le cycle du cosmos dans la vie... c'est une grande roue et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit.
Texte aléatoire Faux-texte... Van Dammesque...Mesdames, messieurs, la prise de conscience de nos dirigeants doit s'intégrer à la finalisation globale d'un rappel des droits fondamentaux de notre pays.
Texte aléatoire Faux-texte... Langue de bois...Boite arrière plan foncé, class=BoiteArrPlan.
Où le zombie préfère-t-il s'extasier sur la vérité ? Nous daignerons aller nous tromper. Ils ont envie de ces tubercules rôtis... Lara Croft se sert de dizaines de lamas. En quel lieu l'énarque terre à terre adore-t-il circuler ?
Texte aléatoire RomainValeri - Classique
Sites d'astuces
Ci-dessous le code CSS à placer en tête de votre article, boite libre.... ou sans les balises dans votre feuille de style styleplus.css. Le code est commenté le plus possible. j'ai laissé en commentaire des règles présentes à l'origine mais que je n'ai pas utilisées. Elles peuvent être supprimées tout simplement. Rétablissez le z-index pour placer ce menu dans une boite du haut de GuppY.
#MenuGC { /*attributs du bandeau*/
/*z-index:9000;*/ /*index haut pour superposer au reste de la page : IMPORTANT : ôter les commentaires pour l'utiliser*/
list-style:none;
width:100%; /*largeur du bandeau*/
margin:5px auto 0px auto; /*marges extérieures*/
height:43px; /*hauteur du bandeau*/
padding:0px 5px; /*marges intérieures*/
border-radius: 10px; /*arrondis*/
background:#8B3810; /*couleur de fond du bandeau si dégradé non fonctionnel*/
background: linear-gradient(to bottom, #B15316, #8B3810); /*couleur de fond du bandeau*/
/*border: 1px solid #002232;*/ /*bordure : ôter les commentaires pour l'afficher*/
/*box-shadow:inset 0px 0px 1px #edf9ff;*/ /*ombre portée intérieure : ôter les commentaires pour l'afficher*/
}
#MenuGC li { /*attributs des items du bandeau*/
float:left;
display:block;
text-align:center;
position:relative;
padding: 4px 5px; /*marges intérieures*/
margin: 7px 10px 0px 0px; /*marges extérieures*/
border:none;
}
#MenuGC li:hover { /*attributs de l'item du bandeau affiché au survol*/
border: 1px solid #777777; /*bordure*/
padding: 4px 5px; /*marges intérieures : idem ci-dessus*/
background: #C6EAF2; /*couleur de fond de l'item survolé si dégradé non fonctionnel ou pour simplifier*/
background: linear-gradient(to bottom, #C6EAF2, #91D7E6); /*couleur de fond de l'item survolé*/
border-radius: 5px 5px 0px 0px; /*arrondis : uniquement en haut*/
}
#MenuGC li a { /*attributs des liens des items du bandeau*/
font-family:Verdana, "Bitstream Vera Sans", sans-serif; /*police*/
font-size:14px; /*taille de la police*/
color: #EEEEEE; /*couleur*/
display:block;
text-decoration:none;
/*text-shadow: 1px 1px 1px #000000;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
}
#MenuGC li:hover a { /*attributs des liens des items du bandeau au survol*/
color:#161616; /*couleur*/
/*text-shadow: 1px 1px 1px #FFFFFF;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
}
#MenuGC li .drop { /*attributs de l'imagette drop.png*/
padding-right:20px; /*marge intérieure droite*/
background:url("img/images/drop.png") no-repeat right 6px; /*chemin de l'image et position*/
}
.MenuGCdropdown_1col,
.MenuGCdropdown_2col,
.MenuGCdropdown_3col,
.MenuGCdropdown_4col,
.MenuGCdropdown_5col { /*attributs des panneaux qui seront affichés au survol*/
/*z-index:9000;*/ /*index haut pour superposer au reste de la page : IMPORTANT : ôter les commentaires pour l'utiliser*/
margin:4px auto; /*marges extérieures*/
float:left;
position:absolute;
left:-3000px; /* Cache le panneau */
text-align:left;
padding:5px; /*marges intérieures*/
border:1px solid #777777; /*bordure : mieux si idem à l'item du bandeau...*/
border-top:none; /*pas de bordure en haut*/
background:#C6EAF2; /*couleur de fond du panneau si dégradé non fonctionnel ou pour simplifier*/
background: linear-gradient(to bottom, #91D7E6, #2FB3CE); /*couleur de fond du panneau*/
border-radius: 0px 5px 5px 5px; /*arrondis : haut droite et bas*/
}
.MenuGCdropdown_1col {width: 160px;}
.MenuGCdropdown_2col {width: 300px;}
.MenuGCdropdown_3col {width: 440px;}
.MenuGCdropdown_4col {width: 580px;}
.MenuGCdropdown_5col {width: 720px;} /*largeurs respectives des panneaux qui seront affichés au survol*/
#MenuGC li:hover .MenuGCdropdown_1col,
#MenuGC li:hover .MenuGCdropdown_2col,
#MenuGC li:hover .MenuGCdropdown_3col,
#MenuGC li:hover .MenuGCdropdown_4col,
#MenuGC li:hover .MenuGCdropdown_5col {
left:-1px; /* Place le panneau au survol */
top:auto;
}
.MenuGCTaille_1,
.MenuGCTaille_2,
.MenuGCTaille_3,
.MenuGCTaille_4,
.MenuGCTaille_5 { /*espace occupé par les colonnes*/
display:inline;
float: left;
position: relative;
margin: 0px 5px; /*marges extérieures*/
}
.MenuGCTaille_1 {width:130px;} /*largeurs de l'espace occupé par les colonnes : un peu moins que les panneaux*/
.MenuGCTaille_2 {width:270px;} /*par exemple un paragraphe occupant la largeur de 2 colonnes*/
.MenuGCTaille_3 {width:410px;} /*par exemple un paragraphe occupant la largeur de 3 colonnes*/
.MenuGCTaille_4 {width:550px;} /*par exemple un paragraphe occupant la largeur de 4 colonnes*/
.MenuGCTaille_5 {width:690px;} /*par exemple un paragraphe occupant la largeur de 5 colonnes*/
#MenuGC .MenuGC_right { /*attributs des items du bandeau alignés à droite*/
float:right;
margin-right:0px; /*marge extérieure droite*/
}
#MenuGC li .align_right { /*attributs du panneau aligné à droite*/
border-radius: 5px 0px 5px 5px; /*arrondis : haut gauche et bas*/
}
#MenuGC li:hover .align_right { /*attributs du panneau aligné à droite*/
left:auto;
right:-1px; /* Place le panneau au survol */
top:auto;
}
#MenuGC p, #MenuGC h2, #MenuGC h3, #MenuGC ul li { /*attributs des textes*/
font-family:Verdana, "Bitstream Vera Sans", sans-serif; /*police*/
text-align:left; /*alignement*/
/*text-shadow: 1px 1px 1px #FFFFFF;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
}
#MenuGC h2 { /*attributs des titres H2*/
line-height:21px; /*hauteur de ligne*/
font-size:21px; /*taille police*/
font-weight:400; /*gras police*/
letter-spacing:-1px; /*écartement caractères*/
margin:7px 0 7px 0; /*marges extérieures*/
padding-bottom:7px; /*marge intérieure basse*/
border-bottom:1px solid #666666; /*bordure basse*/
}
#MenuGC h3 { /*attributs des titres H3*/
line-height:21px; /*hauteur de ligne*/
font-size:14px; /*taille police*/
color:#FF5809; /*couleur*/
margin:3px 0 7px 0; /*marges extérieures*/
padding-bottom:7px; /*marge intérieure basse*/
border-bottom:1px dotted #FF5809; /*bordure basse*/
}
#MenuGC p { /*attributs des paragraphes*/
line-height:18px; /*hauteur de ligne*/
font-size:12px; /*taille police*/
margin:0 0 10px 0; /*marges extérieures*/
}
#MenuGC li:hover div a { /*attributs des liens dans les panneaux*/
font-size:12px; /*taille police*/
display:inline;
padding:0px; /*marges intérieures*/
margin:0px auto; /*marges extérieures*/
color:#973100; /*couleur*/
}
#MenuGC li:hover div a:hover { /*attributs des liens survolés dans les panneaux*/
color:#073038; /*couleur*/
}
.imgshadow { /*Habillage image : facultatif dans le code*/
background:#FFFFFF; /*couleur de fond*/
padding:4px; /*marges intérieures*/
border:1px solid #777777; /*bordure*/
margin-top:5px; /*marge extérieure haute*/
/*box-shadow:0px 0px 5px #666666;*/ /*ombre portée de la boite : ôter les commentaires pour l'afficher*/
}
.img_left { /*Pour image placée à gauche : facultatif dans le code*/
width:auto; /*largeur auto*/
float:left;
margin:2px 15px 5px 5px; /*marges extérieures*/
}
#MenuGC li .BoiteArrPlan { /*attributs Boite Arriere Plan*/
background-color:#333333; /*couleur de fond*/
color: #eeeeee; /*couleur texte*/
/*text-shadow: 1px 1px 1px #000;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
padding:4px 6px 4px 6px; /*marges intérieures*/
border-radius: 5px; /*arrondis*/
/*box-shadow:inset 0 0 3px #000000;*/ /*ombre portée de la boite : ôter les commentaires pour l'afficher*/
}
#MenuGC li:hover .BoiteArrPlan a { color:#FFA275;}
#MenuGC li:hover .BoiteArrPlan a:hover { color:#88DEF0;} /*variation sur les liens et leur survol pour Boite Arriere Plan*/
#MenuGC li ul { /*attributs listes liens*/
list-style:none;
padding:0; /*marges intérieures*/
margin:0 0 12px 0; /*marges extérieures*/
}
#MenuGC li ul li, #MenuGC li ul li:hover { /*attributs items listes liens*/
line-height:24px; /*hauteur de ligne*/
position:relative;
/*text-shadow: 1px 1px 1px #ffffff;*/ /*ombre portée du texte : ôter les commentaires pour l'afficher*/
background:none; /*pas de fond : IMPORTANT*/
border:none; /*pas de bordure : IMPORTANT*/
padding:0; /*marges intérieures*/
margin:0; /*marges extérieures*/
float:none;
text-align:left; /*alignement*/
}
#MenuGC li .BoiteLien li, #MenuGC li .BoiteLien li:hover { /*attributs BoiteLien (et au survol) dans les panneaux*/
background:#D6D6D6; /*couleur fond*/
border:1px solid #bbbbbb; /*bordure*/
margin:0px 0px 4px 0px; /*marges extérieures*/
padding:0px 6px 0px 6px; /*marges intérieures*/
width:116px; /*largeur*/
border-radius: 5px; /*arrondis*/
}
#MenuGC li .BoiteLien li:hover { /*attributs BoiteLien survolée dans les panneaux*/
background:#F4F4F4; /*couleur fond*/
}
Ci-dessous le code html complet de ce menu :
Accueil Incapable ou criminel, monsieur, c'est : pourquoi l'homme noble n'est pas en état de nous nuire. Apportez-moi de bonnes idées, et des choses visqueuses. >Mesdames, messieurs, la prise de conscience de nos dirigeants doit s'intégrer à la finalisation globale d'un rappel des droits fondamentaux de notre pays.
Bienvenue !
Voici quelques possibilités du Menu à Grande Contenance.
Ses items sont organisés avec des largeurs et des dispositions différentes.
Les liens présentés sont là pour l'exemple.
Navigateurs
img/images/navigateurs.png" style="width: 100%;" />
Les navigateurs testés l'affichent correctement !
4 Colonnes
Exemple de listes de liens
Images libres
Polices
GIFS animés
Texte aléatoire
3 Colonnes
Exemple de listes de liens (logiciels)
Images et sons
Office
Utilitaires
Exemple de mise en page avec images
img/images/LL.jpg" style="width: 20%;" />
La plupart des logiciels présentés ci-dessus sont des logiciels dits "libres" ou "open source". Tous sont gratuits. https://enacit.epfl.ch/logiciel-libre/" target="_blank">En savoir plus avec un annuaire...
img/images/FW.jpg" style="width: 20%;" />
D'autres, sont des "freewares" : gratuits, certes mais non-libres et non-open source. https://fr.wikipedia.org/wiki/Freeware" target="_blank">En savoir plus...
5 Colonnes
Exemple de mise en page sur 5 colonnes
Boite arrière plan foncé, class=BoiteArrPlan.
Imaginez-vous ce qu'il découvrirait dans la direction opposée !
Aussitôt, elle chancela un peu, madame ; tant de choses naïves et singulières à lire sur mon visage de ce qui allait arriver.
Avouons toutefois qu'avec fidélité ils se battent une seconde, j'en eus honte toute ma vie !
https://enneagon.org/phrases" target="_blank">Texte aléatoire Enneagon
Exemple de mise en page sur 5 colonnes (suite)
Même si on se ment, je sais que, grâce à ma propre vérité le cycle du cosmos dans la vie... c'est une grande roue et je ne cherche pas ici à mettre un point ! Mais ça, c'est uniquement lié au spirit.
https://www.faux-texte.com/" target="_blank">Texte aléatoire Faux-texte... Van Dammesque...
https://www.faux-texte.com/" target="_blank">Texte aléatoire Faux-texte... Langue de bois...
Boite arrière plan foncé, class=BoiteArrPlan.
Où le zombie préfère-t-il s'extasier sur la vérité ? Nous daignerons aller nous tromper. Ils ont envie de ces tubercules rôtis... Lara Croft se sert de dizaines de lamas. En quel lieu l'énarque terre à terre adore-t-il circuler ?
https://romainvaleri.online.fr/" target="_blank">Texte aléatoire RomainValeri
Classique
Sites d'astuces
Ci-dessous le code html simplifié de ce menu afin de n'en montrer que la structure.