Newsroom
Nous allons voir dans ce tuto comment créer une fenêtre coulissante uniquement en CSS3, dans un premier temps, puis comment l'appliquer à des cas concrets :
Pour créer une fenêtre coulissante en CSS3, nous prenons comme base ce tuto d'Alsacréations :
http://www.alsacreations.com/xmedia/tuto/exemples/volet-coulissant-css3/open-close.html#volet_clos
http://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html
Maintenant, nous allons appliquer cette méthode à cas concret : Afficher cette fenêtre coulissante dans un module personnalisé Joomla.
Ce cas concret est utilisé sur ces 2 sites, que vous pouvez retrouver dans nos réalisations :
Et maintenant, nous allons appliquer cette méthode à un autre cas concret : afficher dans une fenêtre coulissante, un formulaire Seblod.
Ce cas concret est utilisé sur le site de Pulsar, sur la page "Soumettre un cahier des charges" :
http://www.pulsar-informatique.com/soumettre-votre-cahier-des-charges
on créé une variation de position , sur la position du template de formulaire, de la vue site :
A ce stade, la fenêtre coulissante devrait fonctionner : seulement au clic sur le bouton d'ouverture, la fenêtre coulissante ne s'ouvre pas.
Ce bug d'affichage vient de la structure HTML du formulaire SEBLOD : la balise "form", au lieu d'être à l'intérieur du code HTML correspondant à la fenêtre, se retrouve autour du code HTML correspondant à le fenêtre, soit :
Il faut donc forcer le comportement du HTML, de manière à ce que le formulaire SEBLOD, se retrouve bien à l'intérieur du code HTML correspondant au volet.
On met ce code JQUERY dans le fichier de variation, soit :
Dans le code HTML, on créé 2 "span", qui seront chacun affiché sur des supports spécifiques, grâce à l'attribution de class spéciales
Pour finir, il faut ajuster le CSS du nouveau bouton :
Cet article vous a été utile ? Il vous aidé ? N'hésitez pas à laisser un commentaire et à le partager sur vos Réseaux sociaux :)
Commentaires 2
Bonjour,
Pour faire plus simple, j'utilise l'extention jpanel http://bygiro.com/en/extensions/modules/jpanel
Pascal
Bonjour,
Tout d'abord merci pour votre commentaire,
Dans un premier temps j'ai également cherché une extension Joomla. Ce n'était pas jpanel, mais cette extension très bien noté ne fonctionnait pas dans mon cas de figure, c'est à dire, afficher un module joomla dans une fenêtre coulissante, ce module Joomla affichant lui-même un formulaire Seblod.
Donc plutôt que de passer un temps considérable à chercher, tester , et régler les éventuels conflits d'une extension qui fonctionne dans mon cas de figure , plus complexe qu'un module custom, j'ai préféré faire cette fenêtre coulissante moi-même directement dans le module, sans surcharger une extension.
En fait, je penses que la bonne réponse dépend du contexte :
- dans un environnement simple, si il n'y a pas de conflit, installer une extension sera un gain de temps, et peut être la bonne solution.
- dans un environnement plus complexe, à partir du moment où il va falloir passer du temps à trouver la bonne extension, et/ou régler les conflits, vaut mieux passer un peu de temps à faire soi-même quelques lignes de code, où on a complètement la main, sans surcharger le projet d'une extension, qui est toujours susceptible de générer des conflits.
Agathe.