QooQ スマートフォンの時のナビゲーションをゆっくり開閉させる

変更するのはCSSのみです。

HTMLを編集します。必ずバックアップを取ってから作業してください。

変更する場所

ナビゲーション、@media ( max-width : 768px )の#navigation-contentと#navigation-button:checked ~ #navigation-contentを変更します。

/****************************************
         ナビゲーション
*****************************************/

......

@media ( max-width : 768px ) {
	#navigation-label{
		display: block;
		text-align: center;
	}
	#navigation-content{ ← この部分と
		display:none;
	}
	#navigation-button:checked ~ #navigation-content{ ← この部分
		display: flex;
	}
}

変更後

#navigation-content{
	/* display:none; */
	max-height: 0; /* 閉じている時は高さ0 */
	overflow-y: hidden; /* 縦スクロールを非表示 */ /* overflow: hidden でもいいかも */
	transition: .5s; /* 閉じるスピード */
}

#navigation-button:checked ~ #navigation-content{
	/* display: flex; */
	max-height: 60px; /* 開いた時の高さ */
	transition: 1s; /* 開くスピード */
}

#navigation-contentのdisplay:none;と#navigation-button:checked ~ #navigation-contentのdisplay: flex;はコメントアウトしてありますが、削除してもOKです。

開いた時の高さ、開くスピード、閉じるスピードは調整してください。

参考サイト

CSSだけでアコーディオンを実装 - Qiita