【jQuery + CSS】レスポンシブでヌルヌル動く[Expanding Column Layout]を使ってみました。 2018年2月3日 土曜日 2018年2月3日 土曜日 開発ブログ CSS, jQuery 420文字:約1分 onze ONZE https://on-ze.com/archives/7134 HomeBlog【jQuery + CSS】レスポンシブでヌルヌル動く[Expanding Column Layout]を使ってみました。 Ads by Google 先日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ウェブデザインの参考にどうぞ〜。 Twitter Facebook Google+ Feedly LINE こちらの記事もいかがですか? アナタにオススメ! 同じカテゴリーの他の記事です。 【JavaScript】超軽量・超高速のJavaScriptフレームワーク[Vanilla.js]をオススメします。 【jQuery】要素をタイル状に並べるプラグイン[Freetile.js]の使い方。 HTML5の独自データ属性にCSSを効かせる方法。 【CSS3】マウスオーバーで半透明の波紋が広がるエフェクト。 【CSS】リンク先のURLやファイルの拡張子に合わせてアイコンを表示する方法。 【CSS】2行目以降を1文字下げる[text-indent]の使い方。 【jQuery】スクロール機能とナヴィゲーション機能が一体となった[ScrollMenu.js]は実用性バツグンです。 【jQuery】背景画像をブラウザのウィンドウサイズに最適化! Ads by Google