Accueil > Blog > Créer une fenêtre coulissante en CSS3 avec Joomla et Seblod (avec sélecteur :target et propriété transition)

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 ! :)

Créer une fenêtre coulissante en CSS3 avec Joomla et Seblod (avec sélecteur :target et propriété transition)

 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.
Guest
lundi 10 décembre 2018

Image Captcha

Contactez-nous

et parlons de vos projets
Les champs marqués d'un * sont obligatoires.

Trouvez-nous

Nos agences Paris et Picardie

Coordonnées de l'agence

Société Pulsar Informatique
25, rue du Cerf
95270 - LUZARCHES

Tel : 01 30 35 05 06
Fax : 01 30 35 00 56

Email : info(at)pulsar-informatique.com

Ce site utilise des cookies