ハンバーガーメニューのJS処理を案件毎に色々書き換えるのは面倒だなと最近思ったので、試しにclass構文を使って少ない記述で各案件に対応できそう(できるとは言っていない)な形にしてみました。
とはいえまだ、試作段階ですので大目に見てやってください。
また、webpackでバンドルをする想定になっています。
モジュールの記述
src/modules/hamburger.js
export default class hamburger {
constructor(btn, menu) {
this.btn = btn;
this.menu = menu;
}
switch() {
const btn = document.getElementById(this.btn);
const menu = document.getElementById(this.menu);
btn.addEventListener("click", function () {
btn.classList.toggle("_active");
menu.classList.toggle("_active");
});
}
}
エントリーポイントの記述
src/index.js
import hamburger from "./modules/hamburger";
/*------------------------------
TemplateMenu
---------------------------------*/
const templateMenu = new hamburger("Btn", "Menu");
templateMenu.switch();
下記のBtn Menuのところに任意のidを入れると動作する様になっています。
const templateMenu = new hamburger("Btn", "Menu");
まとめ
class構文を使って何かをしてみたかったので正直この形でメニューを作る必要はないとは思います。
ただ、割とコードの見通しは良くなっていじり易さはあるかもしれないと言った感じには思います。
参考になれば嬉しいです!