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