Rajout d'un menu extérieur

Rajout d'un menu extérieur [Réglé]

mais ne fonctionne pas? Créations de Thèmes

MickaelFR Membre non connecté

Booster Fusée

Le 26/02/2016 à 09h22

Bonjour

Je suis en train de personnaliser le thème BASE pour ma futur migration de V3 à V5 (juste la BDD).
Dans l'attente, je créé déjà le thème, mais je suis confronté à un soucis en voulant rajouter un menu extérieur (html, js, css).

Voici ce que j'ai pu faire déjà. Les explications seront en bas.

Frame.tpl, rajout de :

Code HTML :

 
 
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/menu-left/css/component.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/menu-left/css/default-menu-left.css" type="text/css" media="screen" />
 
        <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/menu-left/js/classie.js"></script>
        <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/menu-left/js/modernizr.custom.js"></script>

Body.tpl rajout (tout en haut) de :

Code HTML :

 
<div class="main">
                <section>
 
                    <button id="showLeft">Afficher / masquer le menu</button>
                </section>
            </div>        
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
            <h3>Menu</h3>
            <a href="#">test 01</a>
            <a href="#">test 02</a>
            <a href="#">test 03</a>
            <a href="#">test 04</a>
            <a href="#">test 05</a>
            <a href="#">test 06</a>
        </nav>

Mon menu est affiché tout en haut, mais ne prend pas effet .. J'ai du oublier d'appeler quelque chose, mais quoi?

Autre chose d'incompréhensible .. J'ai retiré les CSS et JS de frame.tpl, que j'ai incorporé directement tout en haut du body.tpl, et ça fonctionne ! Mais le site entier change d'affichage (couleur, taille des polices ect..), j'en ignore complètement la cause.

Pourtant le CSS du menu se trouve dans ../base/menu-left/ et jes appelations dans les .tpl sont bien fait, je ne comprends pas ce mélange ..

J'ai donc tout remis dans le frame.tpl, mais le menu ne fonctionne plus du coup.

Lien : http://planet-truck.fr/v4/index.php
Lien du menu (Fourni par "Swan") : http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/

Édité par MickaelFR Le 26/02/2016 à 09h27

planet-truck.fr - mickaelfr.eu

MickaelFR Membre non connecté

Booster Fusée

Le 26/02/2016 à 12h20

#148881

Salut.

Bien sur le voici :

Code HTML :

<!DOCTYPE html>
<html lang="{L_XML_LANGUAGE}">
    <head>
        <title>{TITLE}</title>
        <meta charset="windows-1252" />
        # IF C_DESCRIPTION #<meta name="description" content="{SITE_DESCRIPTION}" /># ENDIF #
        <meta name="generator" content="PHPBoost" />
        # IF C_CANONICAL_URL #<link rel="canonical" href="{U_CANONICAL}" /># ENDIF #
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
        # IF C_CSS_CACHE_ENABLED #
        <link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/default/theme/default.css;/kernel/lib/css/font-awesome/css/font-awesome.css;/templates/{THEME}/theme/design.css;/templates/{THEME}/theme/content.css;/templates/{THEME}/theme/table.css;/templates/{THEME}/theme/form.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/cssmenu.css;/templates/{THEME}/menu-left/css/component.css;/templates/{THEME}/menu-left/css/default.css')}" type="text/css" media="screen, print" />
        # ELSE #
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/table.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/form.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/cssmenu.css" type="text/css" media="screen" />
 
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/menu-left/css/component.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/menu-left/css/default.css" type="text/css" media="screen" />
 
        <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/menu-left/js/classie.js"></script>
        <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/menu-left/js/modernizr.custom.js"></script>
        # ENDIF #
        # IF C_CSS_LOGIN_DISPLAYED #<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/login.css" type="text/css" media="screen" /># ENDIF #
 
        {MODULES_CSS}
        # IF C_FAVICON #
        <link rel="shortcut icon" href="{FAVICON}" type="{FAVICON_TYPE}" />
        # ENDIF #
        # INCLUDE JS_TOP #
    </head>
    <body itemscope="itemscope" itemtype="http://schema.org/WebPage">
        # INCLUDE BODY #
        # INCLUDE JS_BOTTOM #
    <script>
<!--
var PATH_TO_ROOT = "";
var TOKEN = "b7754e893c2c567d";
var THEME = "phpboost";
var LANG = "french";
-->
</script><script src="/kernel/lib/js/global.js"></script><script src="/BBCode/templates/js/bbcode.js"></script><script src="/kernel/lib/js/global.js"></script><script src="/BBCode/templates/js/bbcode.js"></script><script>
function open_submenu(myid)
{
jQuery('#' + myid).toggleClass('active');
}
 
function check_search_mini_form_post()
{
var textSearched = document.getElementById('TxTMiniSearched').value;
if (textSearched.length > 3)
{
textSearched = escape_xmlhttprequest(textSearched);
return true;
}
else
{
alert('La chaine recherchée doit faire au moins 4 caractères !');
return false;
}
}
jQuery(document).ready(function() {
jQuery('#search-token').val(TOKEN);
});
jQuery("#cssmenu-1784").menumaker({ title: "Menu Principal", format: "multitoggle", breakpoint: 768 }); 
function Confirm_read_topics() {
return confirm("Marquer tous les sujets comme lus ?");
}
//Rafraissiement des topics non lus.
function XMLHttpRequest_unread_topics(divID)
{
if( document.getElementById('refresh_unread' + divID) )
document.getElementById('refresh_unread' + divID).className = 'fa fa-spinner fa-spin';
var xhr_object = xmlhttprequest_init('/forum/xmlhttprequest.php?token=b7754e893c2c567d&refresh_unread=1');
xhr_object.onreadystatechange = function() 
{
if( xhr_object.readyState == 4 && xhr_object.status == 200 && xhr_object.responseText != '' )
{
if( document.getElementById('refresh_unread' + divID) )
document.getElementById('refresh_unread' + divID).className = 'fa fa-refresh';
var array_unread_topics = new Array('', '');
eval(xhr_object.responseText);
if( array_unread_topics[0] > 0 )
forum_display_block('forum_unread' + divID);
document.getElementById('nbr_unread_topics').innerHTML = array_unread_topics[1];
document.getElementById('nbr_unread_topics2').innerHTML = array_unread_topics[1];
document.getElementById('forum_blockforum_unread').innerHTML = array_unread_topics[2];
document.getElementById('forum_blockforum_unread2').innerHTML = array_unread_topics[2];
}
else if( xhr_object.readyState == 4 && xhr_object.responseText == '' )
{
alert("Vous n'avez pas le niveau requis !");
if( document.getElementById('refresh_unread' + divID) )
document.getElementById('refresh_unread' + divID).className = 'fa fa-refresh';
}
}
xmlhttprequest_sender(xhr_object, null);
}
var delay_forum = 1000;
var timeout_forum;
var displayed_forum = false;
var previous_forumblock;
//Affiche le bloc.
function forum_display_block(divID)
{
if( timeout_forum )
clearTimeout(timeout_forum);
var block = document.getElementById('forum_block' + divID);
if( block.style.display == 'none' )
{
if( document.getElementById(previous_forumblock) )
document.getElementById(previous_forumblock).style.display = 'none';
block.style.display = 'block';
displayed_forum = true;
previous_forumblock = 'forum_block' + divID;
}
else
{
block.style.display = 'none';
displayed_forum = false;
}
}
//Cache le bloc.
function forum_hide_block(forumid, stop)
{
if( stop && timeout_forum )
clearTimeout(timeout_forum);
else if( displayed_forum )
{
clearTimeout(timeout_forum);
timeout_forum = setTimeout('forum_display_block('' + forumid + '')', delay_forum);
}
}
jQuery("#cssmenu-forum-top-link").menumaker({ title: " Liens ", format: "multitoggle", breakpoint: 768, menu_static: false });
function check_form_post(){
if(document.getElementById('contents').value == "") {
alert("Veuillez entrer un texte !");
return false;
}
}
 
function XMLHttpRequest_preview(field)
{
if( XMLHttpRequest_preview.arguments.length == 0 )
field = 'contents';
var contents = jQuery('#' + field).val();
var preview_field = 'xmlhttprequest-preview' + field;
if( contents != "" )
{
jQuery("#" + preview_field).slideDown(500);
jQuery('#loading-preview-' + field).show();
jQuery.ajax({
url: PATH_TO_ROOT + "/kernel/framework/ajax/content_xmlhttprequest.php",
type: "post",
data: {
token: 'b7754e893c2c567d',
path_to_root: '..',
editor: 'BBCode',
page_path: '/forum/post.php',
contents: contents,
ftags: ''
},
success: function(returnData){
jQuery('#' + preview_field).html(returnData);
jQuery('#loading-preview-' + field).hide();
}
});
}
else
alert("Veuillez entrer un texte !");
}
set_bbcode_preference('bbcode-container-more');
var PATH_TO_ROOT = "";
var TOKEN = "b7754e893c2c567d";
var THEME = "phpboost";
var LANG = "french";
function open_submenu(myid)
{
jQuery('#' + myid).toggleClass('active');
}
function check_search_mini_form_post()
{
var textSearched = document.getElementById('TxTMiniSearched').value;
if (textSearched.length > 3)
{
textSearched = escape_xmlhttprequest(textSearched);
return true;
}
else
{
alert('La chaine recherchée doit faire au moins 4 caractères !');
return false;
}
}
jQuery(document).ready(function() {
jQuery('#search-token').val(TOKEN);
});
jQuery("#cssmenu-1784").menumaker({ title: "Menu Principal", format: "multitoggle", breakpoint: 768 }); 
function Confirm_read_topics() {
return confirm("Marquer tous les sujets comme lus ?");
}
//Rafraissiement des topics non lus.
function XMLHttpRequest_unread_topics(divID)
{
if( document.getElementById('refresh_unread' + divID) )
document.getElementById('refresh_unread' + divID).className = 'fa fa-spinner fa-spin';
var xhr_object = xmlhttprequest_init('/forum/xmlhttprequest.php?token=b7754e893c2c567d&refresh_unread=1');
xhr_object.onreadystatechange = function() 
{
if( xhr_object.readyState == 4 && xhr_object.status == 200 && xhr_object.responseText != '' )
{
if( document.getElementById('refresh_unread' + divID) )
document.getElementById('refresh_unread' + divID).className = 'fa fa-refresh';
var array_unread_topics = new Array('', '');
eval(xhr_object.responseText);
if( array_unread_topics[0] > 0 )
forum_display_block('forum_unread' + divID);
document.getElementById('nbr_unread_topics').innerHTML = array_unread_topics[1];
document.getElementById('nbr_unread_topics2').innerHTML = array_unread_topics[1];
document.getElementById('forum_blockforum_unread').innerHTML = array_unread_topics[2];
document.getElementById('forum_blockforum_unread2').innerHTML = array_unread_topics[2];
}
else if( xhr_object.readyState == 4 && xhr_object.responseText == '' )
{
alert("Vous n'avez pas le niveau requis !");
if( document.getElementById('refresh_unread' + divID) )
document.getElementById('refresh_unread' + divID).className = 'fa fa-refresh';
}
}
xmlhttprequest_sender(xhr_object, null);
}
var delay_forum = 1000;
var timeout_forum;
var displayed_forum = false;
var previous_forumblock;
//Affiche le bloc.
function forum_display_block(divID)
{
if( timeout_forum )
clearTimeout(timeout_forum);
var block = document.getElementById('forum_block' + divID);
if( block.style.display == 'none' )
{
if( document.getElementById(previous_forumblock) )
document.getElementById(previous_forumblock).style.display = 'none';
block.style.display = 'block';
displayed_forum = true;
previous_forumblock = 'forum_block' + divID;
}
else
{
block.style.display = 'none';
displayed_forum = false;
}
}
//Cache le bloc.
function forum_hide_block(forumid, stop)
{
if( stop && timeout_forum )
clearTimeout(timeout_forum);
else if( displayed_forum )
{
clearTimeout(timeout_forum);
timeout_forum = setTimeout('forum_display_block('' + forumid + '')', delay_forum);
}
}
jQuery("#cssmenu-forum-top-link").menumaker({ title: " Liens ", format: "multitoggle", breakpoint: 768, menu_static: false });
function check_form_post(){
if(document.getElementById('contents').value == "") {
alert("Veuillez entrer un texte !");
return false;
}
}
function XMLHttpRequest_preview(field)
{
if( XMLHttpRequest_preview.arguments.length == 0 )
field = 'contents';
var contents = jQuery('#' + field).val();
var preview_field = 'xmlhttprequest-preview' + field;
if( contents != "" )
{
jQuery("#" + preview_field).slideDown(500);
jQuery('#loading-preview-' + field).show();
jQuery.ajax({
url: PATH_TO_ROOT + "/kernel/framework/ajax/content_xmlhttprequest.php",
type: "post",
data: {
token: 'b7754e893c2c567d',
path_to_root: '..',
editor: 'BBCode',
page_path: '/forum/post.php',
contents: contents,
ftags: ''
},
success: function(returnData){
jQuery('#' + preview_field).html(returnData);
jQuery('#loading-preview-' + field).hide();
}
});
}
else
alert("Veuillez entrer un texte !");
}
set_bbcode_preference('bbcode-container-more');
jQuery("#cssmenu-forum-bottom-link").menumaker({ title: " Liens ", format: "multitoggle", breakpoint: 768, menu_static: false });
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-9800261-7']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    (adsbygoogle = window.adsbygoogle || []).push({});
    jQuery("#cssmenu-1764").menumaker({ title: "Liens utiles", format: "multitoggle", breakpoint: 768 }); 
 
jQuery('[data-confirmation]').each(function() {
data_confirmation = jQuery(this).attr('data-confirmation');
if (data_confirmation == 'delete-element')
var message = 'Voulez-vous vraiment supprimer cet élément ?';
else
var message = data_confirmation;
this.onclick = function () { return confirm(message); }
});
jQuery(document).ready(function() {
jQuery('a[rel^=lightbox]').attr('data-rel', 'lightcase:collection');
jQuery('a[data-lightbox^=formatter]').attr('data-rel', 'lightcase:collection');
jQuery('a[data-rel^=lightcase]').lightcase({
labels : {
'errorMessage' : 'L'élément que vous demandez n'existe pas.',
'sequenceInfo.of' : ' ' + 'sur' + ' ',
'close' : 'Fermer',
'navigator.prev' : 'Précédent',
'navigator.next' : 'Suivant',
'navigator.play' : 'Lecture',
'navigator.pause' : 'Pause'
}
});
});
jQuery('#table').basictable();
jQuery('#table2').basictable();
jQuery('#table3').basictable();
jQuery('#table4').basictable();
jQuery('#table5').basictable();
 
jQuery("#cssmenu-forum-bottom-link").menumaker({ title: " Liens ", format: "multitoggle", breakpoint: 768, menu_static: false });
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-9800261-7']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
    (adsbygoogle = window.adsbygoogle || []).push({});
    jQuery("#cssmenu-1764").menumaker({ title: "Liens utiles", format: "multitoggle", breakpoint: 768 }); 
 
jQuery('[data-confirmation]').each(function() {
data_confirmation = jQuery(this).attr('data-confirmation');
if (data_confirmation == 'delete-element')
var message = 'Voulez-vous vraiment supprimer cet élément ?';
else
var message = data_confirmation;
this.onclick = function () { return confirm(message); }
});
jQuery(document).ready(function() {
jQuery('a[rel^=lightbox]').attr('data-rel', 'lightcase:collection');
jQuery('a[data-lightbox^=formatter]').attr('data-rel', 'lightcase:collection');
jQuery('a[data-rel^=lightcase]').lightcase({
labels : {
'errorMessage' : 'L'élément que vous demandez n'existe pas.',
'sequenceInfo.of' : ' ' + 'sur' + ' ',
'close' : 'Fermer',
'navigator.prev' : 'Précédent',
'navigator.next' : 'Suivant',
'navigator.play' : 'Lecture',
'navigator.pause' : 'Pause'
}
});
});
jQuery('#table').basictable();
jQuery('#table2').basictable();
jQuery('#table3').basictable();
jQuery('#table4').basictable();
jQuery('#table5').basictable();
</script></body>
</html>

Le bouton pour afficher ou masquer le menu s'affiche, mais rien se passe en cliquant dessus, sauf si je désactive le cache CSS. (Astuce de Swan).
Mais en revanche, le site à l'air de récupérer des CSS du menu, car tout l'affichage change (taille des polices, couleurs ect..).

Merci.

Édité par MickaelFR Le 26/02/2016 à 12h31

planet-truck.fr - mickaelfr.eu

babsolune Membre non connecté

Equipe Développement Administrateur

Le 26/02/2016 à 17h03

#148885

Utilisation en slide à gauche uniquement

Arborescence du thème

Nom du thème
-- images (inchangé)
-- js (dossier à créer)
-- -- classie.js( <= issu du zip que tu as dl)
-- -- modernizr.custom.js( <= issu du zip que tu as dl)
-- -- menu-left.js ( <= contenu affiché plus bas)
-- lang (inchangé)
-- theme (ajouter le component.css du zip que tu as dl)

frame.tpl
<span class="formatter-hide">Caché:</span><div class="hide" onclick="bb_hide(this)"><div class="hide2">

Code TPL :

<!DOCTYPE html>
<html lang="{L_XML_LANGUAGE}">
    <head>
        <title>{TITLE}</title>
        <meta charset="windows-1252" />
        # IF C_DESCRIPTION #<meta name="description" content="{SITE_DESCRIPTION}" /># ENDIF #
        <meta name="generator" content="PHPBoost" />
        # IF C_CANONICAL_URL #<link rel="canonical" href="{U_CANONICAL}" /># ENDIF #
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
        <!-- Theme CSS -->
        # IF C_CSS_CACHE_ENABLED #
        <link rel="stylesheet" href="${CSSCacheManager::get_css_path('/templates/default/theme/default.css;/kernel/lib/css/font-awesome/css/font-awesome.css;/templates/{THEME}/theme/design.css;/templates/{THEME}/theme/content.css;/templates/{THEME}/theme/table.css;/templates/{THEME}/theme/form.css;/templates/{THEME}/theme/global.css;/templates/{THEME}/theme/cssmenu.css;/templates/{THEME}/theme/component.css')}" type="text/css" media="screen, print" />
        # ELSE #
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/default/theme/default.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/kernel/lib/css/font-awesome/css/font-awesome.css" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/design.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/content.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/table.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/form.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/global.css" type="text/css" media="screen, print" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/cssmenu.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/component.css" type="text/css" media="screen" />
        # ENDIF #
        # IF C_CSS_LOGIN_DISPLAYED #<link rel="stylesheet" href="{PATH_TO_ROOT}/templates/{THEME}/theme/login.css" type="text/css" media="screen" /># ENDIF #
 
        <!-- Modules CSS -->
        {MODULES_CSS}
 
        # IF C_FAVICON #
        <link rel="shortcut icon" href="{FAVICON}" type="{FAVICON_TYPE}" />
        # ENDIF #
 
        # INCLUDE  JS_TOP #
        <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/modernizr.custom.js"></script>
    </head>
 
    <body itemscope="itemscope" itemtype="http://schema.org/WebPage">
        # INCLUDE  BODY #
        # INCLUDE  JS_BOTTOM #
        <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/classie.js"></script>
        <script type="text/javascript" src="{PATH_TO_ROOT}/templates/{THEME}/js/menu-left.js"></script>
    </body>
</html>

</div></div>

body.tpl
ajoutes à l'endroit où tu veux placer ton bouton :
<span class="formatter-hide">Caché:</span><div class="hide" onclick="bb_hide(this)"><div class="hide2">

Code TPL :

<!-- Menu Perso -->
        <button id="showLeft">Afficher / masquer le menu</button>       
        <nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
            <h3>Menu</h3>
            <a href="{PATH_TO_ROOT}/">test 01</a>
            <a href="{PATH_TO_ROOT}/">test 02</a>
            <a href="{PATH_TO_ROOT}/">test 03</a>
            <a href="{PATH_TO_ROOT}/">test 04</a>
            <a href="{PATH_TO_ROOT}/">test 05</a>
            <a href="{PATH_TO_ROOT}/">test 06</a>
        </nav>
        <!-- fin du Menu Perso -->

</div></div>

menu-left.js
<span class="formatter-hide">Caché:</span><div class="hide" onclick="bb_hide(this)"><div class="hide2">

Code JAVASCRIPT :

var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
    body = document.body;
 
showLeft.onclick = function() {
    classie.toggle( this, 'active' );
    classie.toggle( menuLeft, 'cbp-spmenu-open' );
    disableOther( 'showLeft' );
};
 
function disableOther( button ) {
    if( button !== 'showLeft' ) {
        classie.toggle( showLeft, 'disabled' );
    }
}

</div></div>