完成イメージ
クリックでメニュー開閉
背景スクロール停止
classの付け外しだけで制御
WordPressでもそのまま使えます
すべてコピペで動作します。class名だけ変更すればそのまま流用可能です。
スマホ時はbodyにno-scrollを付けて背景スクロールを防いでいます。
HTML
<button class="hamburger" id="js-hamburger">
<span></span>
<span></span>
<span></span>
</button>
<nav class="nav" id="js-nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">制作実績</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
CSS
/* ハンバーガー */
.hamburger {
width: 30px;
height: 25px;
position: relative;
z-index: 100;
background: none;
border: none;
cursor: pointer;
}
.hamburger span {
position: absolute;
width: 100%;
height: 3px;
background: #333;
left: 0;
transition: .3s;
}
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 10px; }
.hamburger span:nth-child(3) { top: 20px; }
/* 開いた時 */
.hamburger.active span:nth-child(1) {
transform: rotate(45deg);
top: 10px;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg);
top: 10px;
}
/* ナビ */
.nav {
position: fixed;
top: 0;
right: -100%;
width: 70%;
height: 100vh;
background: #fff;
transition: .3s;
padding: 60px 20px;
}
.nav.active {
right: 0;
}
/* スクロール禁止 */
.no-scroll {
overflow: hidden;
}
//これを入れないとスマホで背景スクロールしてしまいます
JavaScript
const hamburger = document.getElementById('js-hamburger');
const nav = document.getElementById('js-nav');
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
nav.classList.toggle('active');
document.body.classList.toggle('no-scroll');
});
ポイント解説（軽め）
classList.toggle()で状態管理
CSSだけでアニメーション制御
JSは「スイッチ役」に徹する
この構成が一番壊れにくいです
WordPressで使う場合
wp_enqueue_script(‘main-js’, get_template_directory_uri() . ‘/js/main.js’, array(), false, true);
フッター読み込み推奨
コピペOKまとめ
HTML / CSS / JSそのままでOKです。
class名だけ変えれば流用可能です。
どの案件でも使えます。
ご相談・お見積もりは無料です。まずはご連絡ください！
初めての方でも安心して進められるよう、丁寧にサポートいたします。
「まだ具体的に決まっていない」
「相談だけでも大丈夫かな？」
という方もご安心ください。
ご相談・お見積もりは無料です。
初めての方にもわかりやすくご案内いたします。
