/* --- ハンバーガーアイコンのスタイル --- */
.hamburger {
display: block;
position: fixed; /* 画面に固定 */
top: 25px; /* 画面の上から25pxの位置 */
right: 25px; /* 画面の右から25pxの位置 */
z-index: 1001; /* 他の要素より手前に表示 */
cursor: pointer;
background-color: #333; /* アイコンの背景色 */
padding: 10px;
border-radius: 50%; /* 円形にする */
box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 影を付けて立体感を出す */
}
.bar {
display: block;
width: 25px;
height: 3px;
margin: 5px auto;
background-color: #fff; /* バーの色 */
transition: all 0.3s ease-in-out;
}
/* ハンバーガーがアクティブになった時のスタイル（X印） */
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* --- 開閉するメニューパネルのスタイル --- */
.nav-menu {
position: fixed; /* 画面に固定 */
z-index: 1000; /* アイコンのすぐ後ろに表示 */
top: 0;
right: -100%; /* 初期状態では画面の右側に隠す */
width: 280px; /* メニューの幅 */
height: 100vh; /* 画面の高さ一杯に表示 */
background-color: #333;
transition: right 0.4s ease-in-out; /* 右からのスライドイン・アウトのアニメーション */
/* メニュー項目を縦に並べるための設定 */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
}
/* メニューが表示された時のスタイル */
.nav-menu.active {
right: 0; /* 画面右端に表示 */
}
/* メニュー項目のスタイル */
.nav-item {
margin: 20px 0;
}
/* メニューリンクのスタイル */
.nav-link {
color: #fff;
text-decoration: none;
font-size: 1.5rem;
font-weight: bold;
}
.nav-link:hover {
color: #ddd;
}
top of page
bottom of page
