[PBTV5.X] Masquer les colonnes de menus au choix

Introduction



Il y a très longtemps du temps ou KONA , me dépatouillait je lui avais demandé comment caché les colonnes de menus sur PBT.. A l'époque nous étions sous Scriptaculous et Mootools, mais depuis lors, au passage au JQuery on avait perdu tout ces petits plus que tout le monde aimait à bricoler sur son site ..

Depuis Jquery, il nous faut faire attention au code que nous entrons dans les pages pour ne pas générés de conflit. Mais je vous repose le code fonctionnel pour masquer vos colonnes de menus à la demande. Cela offre une énorme ergonomie visuel pour vos sites.

Le visuel





Avertissement



Avant toutes modifications de votre site, pensez à faire une sauvegarde de votre thème.

Commençons ..



Pour commencez rendez-vous dans le dossier de votre thème que vous trouverez dans le dossier "templates".
Ouvrez le dossier de votre thème.


Le dossier JS



- A la racine de votre thème, créez un dossier nomé "JS".
- Dedans vous allez y créer un fichier texte du nom de "toggle-menu.js" ( attention pas ".txt")
- Ouvrez le fichier nouvellement Créé et copiez-y ce code :

Code JAVASCRIPT :
 
 /*########################################
*            TOGGLE MENU 
########################################*/
        // On attend que la page soit chargée 
        jQuery(document).ready(function()
        {
           // On cache la zone de texte
           jQuery('#toggle').hide();
           // toggle() lorsque le lien avec l'ID #toggler est cliqué
           jQuery('a#toggler-left').click(function()
          {
              jQuery('.toggle-left').toggle(400);
              return false;
           });
        });
        // On attend que la page soit chargée 
        jQuery(document).ready(function()
        {
           // On cache la zone de texte
           jQuery('#toggle').hide();
           // toggle() lorsque le lien avec l'ID #toggler est cliqué
           jQuery('a#toggler-right').click(function()
          {
              jQuery('.toggle-right').toggle(400);
              return false;
           });
        });
 


Enregistrer et fermer.

Le frame.tpl



Éditez le avec notepad++ / ou votre bloc note, rendez-vous AVANT la balise de fermeture du head"</head>", copiez-y ce code:

Code TPL :
<script src="{PATH_TO_ROOT}/templates/{THEME}/js/toggle-menu.js"></script>    


Cela va vous permettre d'appeler le fichier qui exécutera la demande de masquage de la colonne de menu voulue

Enregistrer et fermer.

Le body.tpl



Éditez le avec notepad++ / ou votre bloc note, rendez-vous à la balise "<div id="sub-header">", et en dessous, copiez-y ce code:

Code TPL :
 
        <!-- Début :: Permet de voir les flèches pour cacher les colonnes de menus -->
        <div id="hide-left">
            <a href="#" id="toggler-left"><i class="fa fa-arrow-left" aria-hidden="true"></a></i>
        </div>
 
        <div id="hide-right">
            <a href="#" id="toggler-right"><i class="fa fa-arrow-right" aria-hidden="true"></a></i>
        </div>
        <!-- Fin :: Permet de voir les flèches pour cacher les colonnes de menus -->
 


Ensuite rendez-vous dans la balise "<aside id="menu-left">" et replacez comme ceci : <aside id="menu-left" class="toggle-left">
De même pour la balise "<aside id="menu-right">" comme ceci : "<aside id="menu-right" class="toggle-right">".

Enregistrer et fermer.

Le design.css



Vous le trouverez dans le dossier "theme" de votre thème. Éditez le avec notepad++ / ou votre bloc note, et placez le code ci dessous à la fin du fichier.

Code CSS :
/* -- Flèche de masquage de la colonne droite & gauche-- */
/* ----------------------------------------------------- */
#hide-left { 
float: left; 
margin: 6px 0 0 0px; /* Permet de régler la hauteur de la flèche*/
margin-left: 15px; /* Permet de régler la distance de la marge gauche de la flèche*/
position: absolute;
}
#hide-right {  
float: right; 
margin: 6px 0 0 0px; /* Permet de régler la hauteur de la flèche*/
margin-right: 15px;  /* Permet de régler la distance de la marge droite de la flèche*/
position: relative;
}
.fa.fa-arrow-left { color: rgba(0, 0, 0, 0.6);} /* Couleur Noir */
.fa.fa-arrow-right { color: rgba(0, 0, 0, 0.6);}/* Couleur Noir */
@media (max-width:768px) {
#hide-left, #hide-right { display:none; }
}


Enregistrer et fermer.

Et pour finir ...



Important: N'oubliez pas de rafraîchir vos caches dans l'administration/Outils/Cache ==> TPL et CSS (voir même navigateur) !

Si vous avez des questions, n'hésitez pas à les poser sur le forum :)


Créé le 13/11/2017, par Swan

Cette page a été consultée 60 fois