先日CODEPENで「何か使えるテクニックはないかな〜」とネットサーフィンしながらイロイロと物色していたところ、「Expanding Column Layout」というスタイルシートのテクニックを見つけました。
以前、本ブログで「CSS3 Flexbox Accordion」を紹介しましたが、その進化版といった感じです。
使いづらい部分や小さなエラーがあったので、その辺りを改良して下記URLにサンプルを作りました。
SAMPLE : https://on-ze.com/demo/jquery-expanding-column-layout/
各メニューをクリックするとコンテンツが浮かび上がる仕組みですが、さすがにCSSのみでの実装は不可能で、動作の部分はjQueryに頼っています。
元ネタはコチラ→https://codepen.io/ettrics/pen/ZYqKGb
ウェブデザインの参考にどうぞ〜。