jQueryでアコーディオンパネルUIを自作する (1/3)
「アコーディオンパネル UI」の完成画面。ラベル部分をクリックすると、下に隠れていたパネルが表示される（画像クリックでサンプルページを表示します） シンプルなアコーディオンを作ってみよう アコーディオンの基本動作から作ります。HTML／XHTML（以下、HTML）は次のとおりで、ラベル部分をdt要素、パネル部分をdd要素で記述する定義型リストで設定します。 ▼サンプル01（HTML部分） <dl> <dt>Step.1</dt> <dd><p>Lorem ...（中略）... venenatis.</p></dd> <dt>Step.2</dt> <dd><p>Integer ...（中略）... accumsan. </p></dd> <dt>Step.3</dt> <dd><p>Integer ...（中略）... imperdiet. </p></dd> </dl> デザインはCSS
JavaScriptで横に開くアコーディオンメニュー
JavaScriptを使って横に開くアコーディオンメニューを紹介します。JavaScriptなのにFlashのような動きのあるメニューが作れます。「prototype.js」「effects.js」「accordion.js」という 3種類のJavaScriptライブラリを利用しており動きは比較的軽快かと思います。タブ数や大きさはJavaScriptとCSSをいじれば自由に変更することができます。 JavaScriptを使って横に開くアコーディオンメニューを紹介します。JavaScriptなのにFlashのような動きのあるメニューが作れます。JavaScriptライブラリは下記よりダウンロードしてお使いください。直リンクはやめてくださいね。 ・ prototype.js ・ effects.js ・ accordion.js
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryを使って画像スクロール、クリック後画像の切り替えをする | CSS Lecture