完成イメージ
クリックでメニュー開閉
背景スクロール停止
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名だけ変えれば流用可能です。
どの案件でも使えます。
この記事を読んだ方はこちら
ご相談・お見積もりは無料です。まずはお気軽にご連絡ください。
act styleでは、デザイン性はもちろん、表示速度やSEO対策にも配慮したレスポンシブWebデザインを標準仕様として採用していますので、パソコン・スマートフォン・タブレットなど、さまざまな端末から快適に閲覧できるホームページを制作いたします。
「ホームページの新規制作」「ホームページのリニューアル」どちらのご要望にも対応可能です。ホームページ制作に関するご相談やご質問なども、お気軽にお問い合わせください。
「まだ制作するか決まっていない」「まずは話だけ聞いてみたい」という場合でも大丈夫です。しつこい営業は一切ありません。どうぞお気軽にご相談ください。
