See the Pen 繰り返し利用可能なドロワーをJavaScriptだけで書く by 熊瀬川直也 (@momonoki1990) on CodePen.
使い方
- ドロワーの開閉ボタンに
data-drawer-btn="true"data-drawer-target="{ドロワーのid}"をセットする - ドロワー本体に
idclass="drawer"data-drawer="true"をセットする。 - ドロワーを閉じるボタンに
class="drawer"data-drawer-close-btn="true" data-drawer-target="{ドロワーのid}"をセットする
ベタがき
drawer.html
<divid="main"><divclass="my-drawer1"><buttonclass="drawer-btn"data-drawer-btn="true"data-drawer-target="drawer1">開閉ボタン1
</button><divclass="drawer"id="drawer1"data-drawer="true"><div><buttonclass="drawer-close-btn"data-drawer-close-btn="true"data-drawer-target="drawer1">x</button></div><divclass="drawer-menu"><divclass="drawer-title">ドロワー1です
</div></div></div></div><divclass="my-drawer2"><buttonclass="drawer-btn"data-drawer-btn="true"data-drawer-target="drawer2">開閉ボタン2
</button><divclass="drawer"id="drawer2"data-drawer="true"><div><buttonclass="drawer-close-btn"data-drawer-close-btn="true"data-drawer-target="drawer2">x</button></div><divclass="drawer-menu"><divclass="drawer-title">ドロワー2です
</div></div></div></div><divclass="my-drawer3"><buttonclass="drawer-btn"data-drawer-btn="true"data-drawer-target="drawer3">開閉ボタン3
</button><divclass="drawer"id="drawer3"data-drawer="true"><div><buttonclass="drawer-close-btn"data-drawer-close-btn="true"data-drawer-target="drawer3">x</button></div><divclass="drawer-menu"><divclass="drawer-title">ドロワー3です
</div></div></div></div></div><style>.drawer{position:fixed;top:0;right:0;padding:1rem;background-color:red;width:300px;height:100%;z-index:100;transition:all0.2s;transform:translate(340px);}.drawer-open{transform:translate(0px);}.drawer-close-btn{position:absolute;top:0;left:0;}.fade-layer{position:absolute;top:0px;left:0px;width:100%;height:100%;background-color:#000000;opacity:0.5;z-index:99;}.d-none{display:none;}</style><script type="text/javascript">// フェードレイヤーを生成しておくwindow.addEventListener('DOMContentLoaded',()=>{constmain=document.getElementById('main');constfadeLayer=document.createElement('div');fadeLayer.setAttribute('id','fade-layer');fadeLayer.classList.add('fade-layer','d-none');main.prepend(fadeLayer);})// フェードレイヤーの表示・非表示切り替えtoggleFadeLayer=()=>{constfadeLayer=document.getElementById('fade-layer');fadeLayer.classList.toggle('d-none');}// ドロワーの表示・非表示切り替えconsttoggleDrawer=(event)=>{consttarget=event.target;constdrawerTarget=target.getAttribute('data-drawer-target');constdrawer=document.getElementById(drawerTarget);drawer.classList.toggle('drawer-open');}// ドロワーの開閉ボタンにクリックイベントを仕込むconstdrawers=document.querySelectorAll('[data-drawer-btn="true"]');drawers.forEach((drawer)=>{drawer.addEventListener("click",(event)=>{toggleDrawer(event);toggleFadeLayer()})})// ドロワーを閉じるボタンにクリックイベントを仕込むconstdrawerCloseBtns=document.querySelectorAll('[data-drawer-close-btn="true"]');drawerCloseBtns.forEach(closeBtn=>{closeBtn.addEventListener('click',(event)=>{toggleDrawer(event);toggleFadeLayer();})})// フェードレイヤーにクリックイベントを仕込む// フェードレイヤーがクリックされたらドロワーを閉じて、フェードレイヤーを非表示にするwindow.addEventListener('DOMContentLoaded',()=>{constfadeLayer=document.getElementById('fade-layer');fadeLayer.addEventListener('click',()=>{constopeningDrawer=document.getElementsByClassName('drawer-open')[0];openingDrawer.classList.remove('drawer-open');fadeLayer.classList.add('d-none');})})</script>