Mes Actualités : Web-design, Animations, Référencement, Réseaux sociaux , News ...

Suivez mes Actus sur le VASTE métier de Développeur Front-End .. Bonne Lecture ! :)

By accepting you will be accessing a service provided by a third-party external to https://www.pulsar-informatique.com/

Fenêtre coulissante en CSS3 avec Joomla et Seblod

 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 :

  • Joomla : afficher un module de contenu personnalisé dans une fenêtre coulissante.
  • Seblod : afficher un formulaire Seblod dans une fenêtre coulissante .

 

fenetre coulissante st witz

 

 

Créer une fenêtre coulissante en CSS3 avec :target et transition

Pour créer une fenêtre coulissante en CSS3, nous prenons comme base ce tuto d'Alsacréations :

Démo :

http://www.alsacreations.com/xmedia/tuto/exemples/volet-coulissant-css3/open-close.html#volet_clos

Tuto

http://www.alsacreations.com/tuto/lire/1234-creer-volet-coulissant-CSS3-target-transition.html

 Afficher un Module de contenu personnalisé Joomla (mod_custom)  dans la fenêtre coulissante

Maintenant, nous allons appliquer cette méthode à cas concret : Afficher cette fenêtre coulissante dans un module personnalisé Joomla.

Visuel :

fenetre coulissante apef

Démo :

Ce cas concret est utilisé sur ces 2 sites, que vous pouvez retrouver dans nos réalisations :

 

Méthode

  • 1/ Créer un module de contenu personnalisé Joomla (mod_custom)
  • 2/ Lui attribuer une position existante, choisir la position au-dessus du contenu principal .
  • 3/ Rentrer le contenu personnalisé à l'intérieur de ce code HTML :

fenetre coulissante html base

  • 4/ Code CSS3 pour obtenir cet effet coulissant :

    cet effet coulissant en CSS3 est réalisé à l'aide du sélecteur :target et de la propriété transition.

    Tout ce qui concerne la largeur du volet, sa couleur, la couleur du bouton,.... est personnalisable à volonté, et n'a aucun impact sur le fonctionnement du volet coulissant.


/******* Fenetre  ********/

#content-display {
   background :rgb(234, 234, 234) none repeat scroll 0 0;
    border: 1px solid #cecece;
    /*bottom: 37px;*/
    top:220px;
    color:     #585657;
    padding: 10px;
    position: fixed;
    right: -313px;
    transition: all 0.5s ease-in 0s;
    -webkit-transition:all 0.5s ease-in 0s;/* Safari */
    width: 290px;
}
#content-display:target {
    right: 0;
}
#content-nodisplay {
    position: relative;
    z-index: 10;
}
#content-display a.open-content, #content-display a.close-content {
    background: @green none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
    font-size: 1.2em;
    padding: 15px 25px;
    text-decoration: none;
}
#content-display a.open-content, #content-display a.close-content {
    border-radius: 8px 8px 0 0;
    font-weight: bold;
    left: -166px;
    position: absolute;
    top: 113px;
    transform: rotate(270deg);
     -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
}
#content-display a.close-content {
    display: none;
    left: -57px;
    top: 3px;
}
#content-nodisplay:target #content-display {
    right: -313px;
}
#content-display:target a.open-content {
    display: none;
}
#content-display:target a.close-content {
    display: block;
}
 

Afficher un formulaire Seblod dans la fenêtre coulissante

Et maintenant, nous allons appliquer cette méthode à un autre cas concret : afficher dans une fenêtre coulissante, un formulaire Seblod.

Visuel :

fenetre coulissante joomla seblod

Cas concret :

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

Méthode

  • 1/ Créer un Formulaire SEBLOD
  • 2/ Pour pouvoir encapsuler le formulaire dans le code HTML voulu, comme expliqué au-dessus :

fenetre coulissante formulaire seblod

on créé une variation de position , sur la position du template de formulaire, de la vue site :

fenetre coulissante variation seblod

  • 3/ Créer un module de formulaire SEBLOD
  • 4/ Lui attribuer une position existante, choisir la position au-dessus du contenu principal .
  • 5/ Code CSS3 pour obtenir cet effet coulissant :


/******* Fenetre  ********/

#content-display {
   background :rgb(234, 234, 234) none repeat scroll 0 0;
    border: 1px solid #cecece;
    /*bottom: 37px;*/
    top:220px;
    color:     #585657;
    padding: 10px;
    position: fixed;
    right: -313px;
    transition: all 0.5s ease-in 0s;
    -webkit-transition:all 0.5s ease-in 0s;/* Safari */
    width: 290px;
}
#content-display:target {
    right: 0;
}
#content-nodisplay {
    position: relative;
    z-index: 10;
}
#content-display a.open-content, #content-display a.close-content {
    background: @green none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
    font-size: 1.2em;
    padding: 15px 25px;
    text-decoration: none;
}
#content-display a.open-content, #content-display a.close-content {
    border-radius: 8px 8px 0 0;
    font-weight: bold;
    left: -166px;
    position: absolute;
    top: 113px;
    transform: rotate(270deg);
     -ms-transform: rotate(270deg); /* IE 9 */
    -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
}
#content-display a.close-content {
    display: none;
    left: -57px;
    top: 3px;
}
#content-nodisplay:target #content-display {
    right: -313px;
}
#content-display:target a.open-content {
    display: none;
}
#content-display:target a.close-content {
    display: block;
}

/* effets de bord sur page a reajuster */
.page-form-cahier-charges .tm-main-top + .tm-content {
    margin-top: 0;
}
.page-form-cahier-charges .uk-panel-box.mod-avis-cahier{
padding:0;
}

/******* END Fenetre  ********/


  • 6/ Forcer comportement HTML du formulaire SEBLOD :


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 :

fenetre coulissante bug seblod

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 :

fenetre coulissante debug seblod

Option Responsive : Afficher un bouton différent sur Smartphone

Visuel

fenetre coulissante phone

Méthode

Code HTML :

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

fenetre coulissante phone html

Code CSS :

Pour finir, il faut ajuster le CSS du nouveau bouton :

.avis-small.uk-icon-share:after {
        content: "\f064";
    display:inline-block;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
       -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
}
.avis-small.uk-icon-share:before {
    content: "";
}

/* Phone landscape and smaller */
@media (max-width: 767px) {

#content-display a.open-content {    
    left: -100px!important;   
}
#content-display {   
    top:125px!important;
}

}/*fin Phone landscape and smaller*/

 

Cet article vous a été utile ? Il vous aidé ? N'hésitez pas à laisser un commentaire et à le partager sur vos Réseaux sociaux  :)

151 agathe


 

 

Commentaires 2

Guest - leconte

le mardi 14 février 2017 14:35

Bonjour,

Pour faire plus simple, j'utilise l'extention jpanel http://bygiro.com/en/extensions/modules/jpanel

Pascal

Bonjour, Pour faire plus simple, j'utilise l'extention jpanel http://bygiro.com/en/extensions/modules/jpanel Pascal

agathe

le jeudi 16 février 2017 08:14

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.




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.
Already Registered? Login Here
Guest
dimanche 7 juin 2020

Image Captcha