↓HTML
↓CSS
/* PC用のメニュー */ .menu02 { display: flex; /* フレックスボックスを使用 */ justify-content: flex-start; /* 均等に隙間を埋める */ width: 100%; /* メニュー全体横幅 */ } /* メニュー個別 */ .menu02 li { flex-grow: 1; /* 均等に隙間を埋める */ text-align: center; /* 文字揃え */ border-right: solid 1px #9e8b8e; /* 区切り線 右 */ } /* 最後のリストだけ */ .menu02 li:last-child{ border-right: none; /* 区切り線 右なし */ } /* リンクしている状態 */ .menu02 li a { background-color: #dcd6d9; /* 背景色 */ text-decoration: none; /* リンクの下線消す */ display: block; /* ブロックにする */ color: #281a14; /* 文字色 */ padding: 20px; /* 余白 */ } /* 押したとき */ .menu02 li a:hover{ color: #fff; /* 文字色 */ background-color: #442220; /* 背景色 */ } /* ≡ の指定 */ .navmenu02 { display: none; /* 640px以上は非表示 */ } /* 640px以下の場合 ================================================================================================ */ @media screen and (max-width: 640px){ /* メニューの方の指定 ---------------------------- */ .menu02 { display: block; /* フレックスボックスを解除 */ position: fixed; /* ポジション固定 */ top: 0; /* 上から0px */ right: -340px; /* メニューの横幅 width + padding */ z-index: 999; /* 画面の重なり */ width: 300px; /* 横幅 メニューの横幅 */ height: 100%; /* 高さ100% */ /* border: solid 1px red; /* 確認用 */ background-color: rgba(0,0,0,.6); /* 背景色 */ } /* メニュー個別 */ .menu02 li { text-align: left; /* 文字揃え */ border-right: none; /* 区切り線 右 */ border-bottom: solid 1px #fff; /* 区切り線 下 */ } .menu02 li a { color: #fff; /* 文字色 */ background-color: rgba(0,0,0,.0); /* 背景色 */ } /* ≡ の指定 ---------------------------- */ .navmenu02 { display: block; /* 640px以下は表示 */ color: #f5f3eb; /* 文字色 */ text-align: center; /* 文字揃え */ background-color: #442220; /* 背景色 */ position: fixed; /* 絶対配置 */ right:0; /* 右から0px */ top:0; /* 上から0px */ z-index: 9999; /* 画面の重なり一番上 */ font-size: 120%; /* 文字サイズを好みで大きく */ width: 2em; /* 横幅 */ line-height: 2em; /* 高さ */ } input[type="checkbox"].on-off{ display: none; /* 通常は非表示 */ } input[type="checkbox"].on-off + ul{ /* + ul 隣接しているulに適用 */ overflow: hidden; /* display: none;では高さが出ない */ transition: all 0.5s; /* 変わるまでの時間を設定 */ } input[type="checkbox"].on-off:checked + ul{ /* :checkedは疑似クラス チェックボックスがオンの状態の時 */ right: 0; /* マイナスにしていた右を0に戻す */ } .navmenu02 { cursor: pointer; } /* マウスカーソルの形状 ポインター */ }