ナビ・リスト操作
ハンバーガーメニュー
三本線アイコンが × に変形しながらメニューが横からスライドイン。iframe内対応のposition:absolute実装。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="hb-root">
<header class="hb-header">
<span class="hb-logo">MyApp</span>
<button class="hb-btn" aria-label="メニューを開く" aria-expanded="false">
<span class="hb-bar"></span>
<span class="hb-bar"></span>
<span class="hb-bar"></span>
</button>
</header>
<nav class="hb-drawer" aria-hidden="true">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">実績</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<div class="hb-overlay"></div>
<main class="hb-main">
<p class="hb-hint">右上の ☰ をクリック</p>
</main>
</div>