アニメーション付きハンバーガーメニュー ジェネレーター

<!-- ハンバーガーメニューボタン -->
<button type="button" class="hamburger-btn" aria-label="メニューを開閉する" aria-expanded="false">
	<span class="hamburger-line"></span>
	<span class="hamburger-line"></span>
	<span class="hamburger-line"></span>
</button>

<!-- スライドメニュー本体 -->
<nav class="slide-menu">
	<ul class="menu-list">
		<li><a href="#">ホーム</a></li>
		<li><a href="#">サービスについて</a></li>
		<li><a href="#">会社概要</a></li>
		<li><a href="#">お問い合わせ</a></li>
	</ul>
</nav>

<!-- 背面オーバーレイ (背景暗転) -->
<div class="menu-overlay"></div>

<!-- 動作確認用の案内メッセージ (不要な場合は削除してください) -->
<div class="menu-guide">
	<p>※ハンバーガーメニューは画面の指定位置に固定配置されています。</p>
	<p>ボタンをクリックすると、メニューがスライドインします。</p>
</div>

/* --- ハンバーガーボタンのスタイル --- */
.hamburger-btn {
	position: fixed;
	top: 20px;
	{{menu_dir}}: 20px;
	width: 48px;
	height: 48px;
	background: none;
	border: none;
	cursor: pointer;
	z-index: 10000;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px; /* 線の間隔 */
	padding: 0;
}

/* 3本ラインの共通スタイル */
.hamburger-line {
	display: block;
	width: 30px;
	height: {{line_thickness}}px;
	background-color: {{line_color}};
	border-radius: 4px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* アニメーション別の状態変化 */
{{anim_style_css}}

/* --- メニュー本体のスタイル --- */
.slide-menu {
	position: fixed;
	top: 0;
	width: {{menu_width}}px;
	height: 100vh;
	background-color: {{menu_bg}};
	box-shadow: {{dir_style_css}};
	z-index: 9999;
	box-sizing: border-box;
	padding: 80px 24px 24px;
	transition: transform 0.3s ease;
}

/* 左右スライド方向の初期配置とアクティブ状態 */
{{dir_style_css}}

/* メニューリストのスタイル */
.menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.menu-list li {
	margin-bottom: 20px;
}

.menu-list a {
	display: block;
	color: {{menu_text}};
	text-decoration: none;
	font-size: 18px;
	font-weight: 500;
	padding: 8px 12px;
	border-radius: 6px;
	transition: background-color 0.2s, color 0.2s;
}

.menu-list a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
}

/* --- オーバーレイ (背景暗転) のスタイル --- */
.menu-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.menu-overlay.is-visible {
	opacity: 1;
	pointer-events: auto;
}

/* --- 案内メッセージのスタイル --- */
.menu-guide {
	text-align: center;
	padding: 40px 20px;
	color: #64748b;
	font-size: 14px;
	line-height: 1.8;
	background-color: #f8fafc;
	border: 1px dashed #cbd5e1;
	border-radius: 8px;
	margin: 40px auto;
	max-width: 440px;
}
.menu-guide p {
	margin: 4px 0;
}

(() => {
	const btn = document.querySelector('.hamburger-btn');
	const menu = document.querySelector('.slide-menu');
	const overlay = document.querySelector('.menu-overlay');

	if (!btn || !menu || !overlay) return;

	// メニューを開閉する関数
	const toggleMenu = () => {
		const isExpanded = btn.getAttribute('aria-expanded') === 'true';
		btn.setAttribute('aria-expanded', !isExpanded);
		btn.classList.toggle('is-active');
		menu.classList.toggle('is-open');
		overlay.classList.toggle('is-visible');
	};

	// イベントの登録
	btn.addEventListener('click', toggleMenu);
	overlay.addEventListener('click', toggleMenu);
})();