jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法｜BLACKFLAG
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
シンプルで汎用性に優れたレスポンシブ対応のタブコンテンツ -Basic Tabs
jQueryとCSS3アニメーションを使ってシンプルに実装する、レスポンシブ対応のタブコンテンツを紹介します。 BasicTabs - The Simple jQuery/CSS3 Solution Basic Tabsのデモ Basic Tabsの実装 Basic Tabsのデモ タブはレスポンシブ対応で、表示サイズに合わせて最適化されます。 タブの切替はCSS3アニメーションで、左からフェードインで表示されます。このエフェクトの変更は簡単です。 デモページ：幅480pxで表示 Basic Tabsの実装 実装は非常にシンプルなので、カスタマイズも簡単だと思います。 Step 1: HTML HTMLは非常にシンプルで、タブはリスト要素、コンテンツはdiv要素で配置します。 <div id="tabwrap"> <!-- TABS --> <ul id="tabs"> <li class
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
