slideout.jsを使用して左右にスライドアウトメニュー

Question

私はslideout.jsを使用してハンバーガーメニューを作成しています。私は左メニューを作成しましたが、正しいメニューを作成する方法がわかりません。

var slideout = new Slideout({ 
    'panel': document.getElementById('panel'), 
    'menu': document.getElementById('menu'), 
    'padding': 256, 
    'tolerance': 70 
}); 
document.querySelector('.js-slideout-toggle').addEventListener('click', function() { 
    slideout.toggle(); 
}); 

、右1の唯一の違いは、それはあなたがslideout.destroy();はクリーンアップに使用できると言うAPIで'side': 'right'

を追加していく予定：

私は左の1のために使用しているコードがあります同じインスタンス上に別のスライドアウトを作成することができます。しかし、私は新しいコードでこれをどのように実装するのか分かりません。

var slideout = new Slideout({ 
    'panel': document.getElementById('panel'), 
    'menu': document.getElementById('shop'), 
    'padding': 256, 
    'tolerance': 70, 
    'side': 'right' 
}); 
document.querySelector('.js-slideout-toggle-right').addEventListener('click', function() { 
    slideout.toggle(); 
}); 

しかし、これは動作しません：私はこれをしなかった右slideoutについては

。 .js-slideout-toggle-rightボタンをクリックすると、右に開きません。 .js-slideout-toggleをクリックして左のメニューを開くと、右のメニューが開き、左のメニューが開きません。何か案は？

Answer 1

2つが必要なときに1つの変数しかないので、少しばかり混乱します。

あなたはちょうどそれがslideoutRightまたはslideoutLeftだ場合は指定する必要があり、ここに行く：

var slideoutLeft = new Slideout({ 
    'panel': document.getElementById('panel'), 
    'menu': document.getElementById('menu'), 
    'padding': 256, 
    'tolerance': 70 
}); 
document.querySelector('.js-slideout-toggle').addEventListener('click', function() { 
    slideoutLeft.toggle(); 
}); 


var slideoutRight = new Slideout({ 
    'panel': document.getElementById('panel'), 
    'menu': document.getElementById('shop'), 
    'padding': 256, 
    'tolerance': 70, 
    'side': 'right' 
}); 
document.querySelector('.js-slideout-toggle-right').addEventListener('click', function() { 
    slideoutRight.toggle(); 
});