ONZE/BLOGオンズ開発ブログ

先日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

ウェブデザインの参考にどうぞ〜。