すたすた式
Blogger QooQ
変更するのはCSSのみです。
HTMLを編集します。必ずバックアップを取ってから作業してください。
ナビゲーション、@media ( max-width : 768px )の#navigation-contentと#navigation-button:checked ~ #navigation-contentを変更します。
@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です。
display:none;
display: flex;
開いた時の高さ、開くスピード、閉じるスピードは調整してください。
CSSだけでアコーディオンを実装 - Qiita
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿