HTML+CSSでシュッと出てくる折りたたみメニュー

作りました。

See the Pen クリックでシュッと出るメニュー by むいにゃん 🧗 (@mui_nyan) on CodePen.

ソース

<details>
    <summary>絞り込み</summary>
    <div>
        シュッと出てくるコンテンツ
    </div>
</details>
<p>次のコンテンツ</p>

details[open] summary ~ * {
    animation: sweep .2s ease-out;
    margin-left: 1em;
}

@keyframes sweep {
    0%    {opacity: 0; margin-left: 0}
    100%  {opacity: 1; margin-left: 1em}
}

解説

details要素とsummary要素の組み合わせにより、スクリプトなしで折りたたみメニューが実現できます。
この要素が使えるようになる以前は、スクリプトなしで実現するにはcheckboxと組み合わせてトリック的なCSSを書いていました。↓みたいなやつ

.block {
    height: 0;
    overflow: hidden;
    transition: .2s;
}
.checkbox:checked + .block{
    height: 100px;
}

この手法と比較して、details/summary要素ならばHTMLのみで折りたたみが作れる特徴があります。
ただし欠点として、開閉時にCSS Transitionを効かせることができません。
代わりに、animation プロパティを利用して出現時にシュッとさせています。

参考文献

• https://stackoverflow.com/questions/38213329/how-to-add-css3-transition-with-html5-details-summary-tag-reveal