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 .

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 :

Démo :

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

• Commune de Saint-Witz:
• Apefservices:

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 :

• 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 :

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 :

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

• 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 :

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 :

Option Responsive : Afficher un bouton différent sur Smartphone

Visuel

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

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

Agathe Fert