アコーディオン式メニューシンプル動作

 
Web Tips.
Booskanium's
Booskanium's Web Tips.

シンプルなアコーディオン式メニューです。JavaScriptは利用していません。HTMLとCSSのみで動作します。
使い方の想定は、左(または右)にアコーディンメニュー用のブロックを設置して、その横にコンテンツ用の枠ブロックを配置する場合に適しています。
スマホの場合は横幅がないことから、レスポンシブで横に並んだメニューとコンテンツ枠を縦に並べ、そのままではメニューが縦長で視野性が悪いことから、メニューを自動で折りたたみ、タップすると展開するようにしました。

サンプル

サンプル

サンプル