レスポンシブ折り込み（ハンバーガーメニュー）コード

サイトタイトル

• ホーム
• サービス
• ブログ
• お問い合わせ

/* 基本デザイン */ .site-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #fff; border-bottom: 1px solid #ddd; }

.global-nav ul {
display: flex;
gap: 20px;
}
.global-nav a {
text-decoration: none;
color: #333;
}

/* ===== SP折り込み ===== /
.menu-btn {
display: none; / PCでは非表示 */
flex-direction: column;
gap: 5px;
width: 28px;
height: 28px;
background: transparent;
border: none;
cursor: pointer;
}
.menu-btn span {
display: block;
width: 100%;
height: 3px;
background: #333;
transition: .3s;
}

/* SP表示で開閉 */
@media (max-width: 768px) {
.global-nav {
position: absolute;
top: 60px;
right: 0;
background: #fff;
width: 200px;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
transform: translateX(100%);
transition: .3s;
}

.global-nav ul {
flex-direction: column;
padding: 12px;
}

.menu-btn {
display: flex;
}

/* ナビ開く */
.global-nav.active {
transform: translateX(0);
}

/* ハンバーガーアニメ */
.menu-btn.active span:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.menu-btn.active span:nth-child(2) {
opacity: 0;
}
.menu-btn.active span:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
}