メニュー5

↓CSS　CSS3の「~」で、ある要素の後にある要素にスタイルを適用する、というのを使ってみた
/* PC用のメニュー */
.menu05 {
    display: flex; /* フレックスボックスを使用 */
    justify-content: flex-start; /* 均等に隙間を埋める */
    width: 100%; /* メニュー全体横幅 */
}

/* メニュー個別 */
.menu05 li { 
    flex-grow: 1; /* 均等に隙間を埋める */
    text-align: center; /* 文字揃え */
    border-right: solid 1px #9e8b8e; /* 区切り線 右 */    
}

/* 最後のリストだけ */
.menu05 li:last-child{
    border-right: none; /* 区切り線 右なし */        
}

/* リンクしている状態 */
.menu05 li a {
    background-color: #dcd6d9; /* 背景色 */
    text-decoration: none; /* リンクの下線消す */
    display: block; /* ブロックにする */
    color: #281a14;  /* 文字色 */
    padding: 20px; /* 余白 */
}

/* 押したとき */
.menu05 li a:hover{
    color: #fff; /* 文字色 */
    background-color: #442220; /* 背景色 */     
}

/* ≡　の指定  */  
.navmenu05 { 
    display: none; /* 640px以上は非表示 */
}

/* 640px以下の場合 ================================================================================================ */

@media screen and (max-width: 640px){
    
/* メニューの方の指定 ---------------------------- */
.menu05 {
    display: block; /* フレックスボックスを解除 */
    position: fixed; /* ポジション固定 */
    top: 0; /* 上 */
    left:-999px; /* 左からの位置  */
    z-index: 999; /* 画面の重なり */
    width: 100%; /* 横幅 メニューの横幅 */
    height: 100%; /* 高さ100％ */
    background-color: rgba(0,0,0,.7); /* 背景色 */
}

/* メニュー個別 */
.menu05 li {
    border-right: none; /* 区切り線 右 */
    border-bottom: solid 1px #fff; /* 区切り線 下 */
}
    
.menu05 li a {
    color: #fff;  /* 文字色 */
    background-color: rgba(0,0,0,.0); /* 背景色 */
}

/* ≡　の指定 ---------------------------- */  
    .navmenu05 { 
            display: block; /* 640px以下は表示 */
            color: #f5f3eb; /* 文字色 */
            text-align: center; /* 文字揃え */
            background-color: #442220; /* 背景色 */          
            position: fixed; /* 絶対配置 */
            right:0; /* 右からの位置  */
            top:0; /* 上から0px  */
            z-index: 9999; /* 画面の重なり一番上 */
            font-size: 120%; /* 文字サイズを好みで大きく */
            width: 2em; /* 横幅 */
            line-height: 2em; /* 高さ */
            }
    .navmenu05:before{ content: "≡"; } /* ≡　表示 */
    
    input[type="checkbox"].on-off{
            display: none; /* 通常は非表示 */
            }
 
    input[type="checkbox"].on-off ~ .menu05{ /*  ~ ul 後ろにある .menu05に適用 */
              overflow: hidden; /* display: none;では高さが出ない */
              transition: all 0.5s ease-out /* 変わるまでの時間を設定 ease-out ゆっくり終わる */
            }
 
    input[type="checkbox"].on-off:checked ~ .menu05{ /* :checkedは疑似クラス チェックボックスがオンの状態の時 */
        left: 0; /* マイナスにしていた上を0に戻す */
 }
     .navmenu05 { cursor: pointer; } /* マウスカーソルの形状 ポインター */
     
     
     /* チェックボックスオンの時 */
input[type="checkbox"].on-off:checked ~ .navmenu05:before{
 content: "×"; /* ×　表示 */
}
}
CSSだけで切り替えるタイプ5
