ライブラリなし、素のJavaScriptでもオフキャンバスドロワーが作れます。

💡ポイントは以下のように「JSからスタイルを指定」すること。

❌「JSでクラスを付け替えてCSSでスタイル変更」
　ではうまくアニメーションしませんでした。

drawer.js


	// メニューを開く
	function openMenu() {
		// アイコン変形、ナビエリアvisible
		hamburger.classList.add(CLASS);
		menu.classList.add(CLASS);

		// ヘッダーを左へ移動
		header.style.transform = "translateX(-300px)";
		header.style.transition = "all 0.3s ease-in-out";

		// コンテンツ部分を左へ移動
		contents.style.transform = "translateX(-300px)";
		contents.style.transition = "all 0.3s ease-in-out";

		// マスクON
		headerMask.classList.add(maskOn);
		contentsMask.classList.add(maskOn);

		// 背面コンテンツ固定
		backgroundFix(true);
		hamburger.setAttribute("aria-expanded", "true");
		flg = true;
	}

🌻ライブラリなし！
　オフキャンバスドロワー🌻

素のJSでもオフキャンバスドロワーが作れます！

💡ポイントは次ポストの画像のように
　「JSからスタイルを指定」すること

❌「JSでクラスを付け替えてCSSでスタイル変更」
　ではうまくアニメーションしません#javascript #CSS #ドロワー pic.twitter.com/Mhlluv8Nab
— とも@Web制作ママ (@tomowillbe) September 5, 2023