メニュー2

↓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; } /* マウスカーソルの形状 ポインター */
}
CSSだけで切り替えるタイプ2
