この記事では一部分を中心に解説しています。
全体像や関連知識もあわせて理解したい方は、以下の記事もぜひご覧ください。
完成イメージ
クリックでメニュー開閉
背景スクロール停止
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
/* ハンバーガー */
.comple{
position: relative;z-index:100;
}
.hamburger {
width: 26px;
height: 18px;
position: relative;
}
.hamburger span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: #333;
display: block;
transform-origin: center;
backface-visibility: hidden;
transform: translateZ(0);
}
/* 間隔 */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 7px; }
.hamburger span:nth-child(3) { top: 14px; }
/* 開いた時 */
.hamburger.active span:nth-child(1) {
transform: rotate(45deg);
top: 7px;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg);
top: 7px;
}
.js-nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: #fff;
opacity: 0;
transform: translateY(-20px); /* ←少しだけ距離を増やす */
pointer-events: none;
transition:
transform .45s cubic-bezier(.22, 1, .36, 1),
opacity .35s ease;
}
/* 開いた時 */
.js-nav.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}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名だけ変えれば流用可能です。
どの案件でも使えます。
表示速度改善のご相談・診断は無料です。
サイト表示速度は、SEO・ユーザー離脱率・CV率にも大きく影響します。
画像最適化・CSS/JS最適化・サーバー設定など、原因は多岐にわたります。
act styleでは、WordPressやEC-CUBEの表示速度改善にも対応しています。
「サイトが重い」と感じたら、まずはお気軽にご相談ください。
今回解説した内容に関連するテーマは、以下の記事でも詳しく解説しています。
理解を深めたい方は、あわせてご覧ください。
このテーマを正しく理解するための基礎知識
この記事の理解を深めるための補足情報です。
関連する重要なポイントや基礎知識を整理してまとめています。