『gnav__nn』というグループで完結するように改修。
<header class="gnav__modal">
<div class="inner-layout">
<div class="gnav__logo">
<a href="/">
<img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo.svg" alt="logo">
</a>
</div>
<div class="gnav__hamburger">
<div class="border"></div>
</div>
<nav class="gnav__nav fade">
<ul>
<li>
<a href="/"><span class="text">Home</span></a>
</li>
<li>
<a href="/about/"><span class="text">About</span></a>
</li>
<li>
<a href="/works/"><span class="text">Works</span></a>
</li>
<li>
<a href="/contact/"><span class="text">Contact</span></a>
</li>
</ul>
</nav>
<div class="gnav__bg"></div>
</div>
</header>body.is--fixed {
position: fixed;
width: 100%;
top: 0;
left: 0;
}@use "../global/_setting" as *;
// .gnav__modal
//=====================================================
.gnav__modal {
width: 100%;
height: 52px;
position: fixed;
top: 0;
left: 0;
@include z-index-10;
@include media(pc) {
height: 80px;
}
.inner-layout {
padding: 0 3.5%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
@include media(pc) {
margin-inline: auto;
padding: 0 32px;
height: 100%;
}
}
}
// .gnav__logo
//=====================================================
.gnav__logo {
width: 92px;
height: auto;
display: flex;
align-items: center;
position: relative;
top: 12px;
@include media(pc) {
width: 136px;
top: 32px;
}
img {
width: 100%;
}
}
// .gnav__hamburger
//=====================================================
.gnav__hamburger {
width: 52px;
height: 52px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
@include z-index-4;
gap: 6px 0;
transition: 0.3s ease;
@include media(pc) {
display: none;
}
&:before {
content: "";
display: block;
width: 50%;
height: 2px;
background: colors(black);
transition: 0.3s ease;
border-radius: 3px;
}
&:after {
content: "";
display: block;
width: 50%;
height: 2px;
background: colors(black);
transition: 0.3s ease;
border-radius: 3px;
}
.border {
width: 50%;
height: 2px;
background: colors(black);
transition: 0.3s ease;
border-radius: 3px;
}
}
// .gnav__nav
//=====================================================
.gnav__nav {
// 右からメニューが出る
&.right {
position: fixed;
@include z-index-3;
top: 0;
right: -256px;
width: 256px;
height: 100dvh;
background: colors(black);
transition: 0.3s ease;
overflow-y: scroll;
padding-bottom: 50px;
@include media(pc) {
display: block;
position: relative;
transform: none;
height: auto;
background: none;
overflow: inherit;
width: min-content;
left: auto;
right: auto;
padding-bottom: 0;
height: 80px;
margin-left: auto;
}
ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.6rem;
text-align: center;
margin-top: 52px;
background: red;
@include media(pc) {
flex-direction: row;
}
li {
margin-bottom: 1.85em;
line-height: 1.25;
@include media(pc) {
margin-bottom: 0;
}
&:last-of-type {
margin-bottom: 0;
}
a {
white-space: nowrap;
transition: 0.3s ease;
}
}
}
}
// fadeでメニューが出る
&.fade {
position: fixed;
@include z-index-3;
top: 0;
left: 0;
width: max-content;
height: max-content;
background: colors(white);
transition: 0.3s ease;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
@include media(pc) {
display: flex;
position: relative;
transform: none;
height: auto;
background: none;
overflow: inherit;
width: min-content;
left: auto;
right: auto;
padding-bottom: 0;
height: 80px;
margin-left: auto;
opacity: 1;
visibility: visible;
pointer-events: auto;
}
ul {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 1.6rem;
text-align: center;
//background: red;
position: fixed;
inset: 0; /* 上下左右を0にする */
margin: auto;
width: fit-content;
height: fit-content;
@include media(pc) {
flex-direction: row;
position: static;
gap: 0 2.25em;
}
li {
margin-bottom: 1.85em;
line-height: 1.25;
@include media(pc) {
margin-bottom: 0;
}
&:last-of-type {
margin-bottom: 0;
}
a {
white-space: nowrap;
transition: 0.3s ease;
letter-spacing: 0.1em;
position: relative;
transform: translateY(0);
display: block;
&:hover {
transform: translateY(-2px);
.text {
}
}
.text {
transition: transform 0.3s ease, opacity 0.3s ease;
}
}
}
}
}
}
// .gnav__bg
//=====================================================
.gnav__bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
height: 100dvh;
@include z-index-2;
background: rgba(255, 255, 255, 0.4);
@include backdrop-filter(blur(20px));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
// 状態変化
@include media(pc) {
display: none;
}
&.is--visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
// 状態変化
//=====================================================
.gnav__modal {
&.is--open {
// .gnav__hamburger
.gnav__hamburger {
&:before {
width: 40%;
transform: rotate(45deg) translateX(4px) translateY(4px);
}
&:after {
width: 40%;
transform: rotate(-45deg) translateX(7px) translateY(-7px);
}
.border {
opacity: 0;
}
}
// .gnav__nav
.gnav__nav {
&.right {
right: 0;
}
&.fade {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
}
}// g-nav modal
//=====================================================
document.addEventListener('DOMContentLoaded', function () {
const hamburger = document.querySelector('.gnav__hamburger');
const modal = document.querySelector('.gnav__modal');
const bg = document.querySelector('.gnav__bg');
const body = document.body;
let scrollY = 0; // 現在のスクロール位置を保持
// モーダルの開閉処理を関数化
function openModal() {
scrollY = window.scrollY; // 現在のスクロール位置を記録
body.style.top = `-${scrollY}px`; // bodyの位置をスクロール位置に合わせる
modal.classList.add('is--open');
bg.classList.add('is--visible');
body.classList.add('is--fixed');
}
function closeModal() {
modal.classList.remove('is--open');
bg.classList.remove('is--visible');
body.classList.remove('is--fixed');
body.style.top = ''; // topスタイルをリセット
window.scrollTo(0, scrollY); // 元のスクロール位置に戻す
}
// ハンバーガーメニューのクリックでメニューの開閉
hamburger.addEventListener('click', function () {
if (modal.classList.contains('is--open')) {
closeModal(); // モーダルが開いている場合は閉じる
} else {
openModal(); // モーダルが閉じている場合は開く
}
});
// 背景エリアをクリックでメニューを閉じる
bg.addEventListener('click', closeModal);
});
コメントを残す