2011年9月アーカイブ

jQueryでアコーディオンを実装する場合、
jQueryファイルとスタイルシートファイルを別々に作りますが、
一括にしたプラグインがあります。
同じサイズの画像ファイルを用意しておき、
リストタグで並べるだけで横スライド式アコーディオンになる。

使用サンプル　→　横スライド式アコーディオン

参考サイト　⇒　Nate Armagost

グローバルナビゲーションの階層をドロップダウンで開閉するのではなく、
アコーディオンのように伸縮式にする場合があります。
デザインはスキンとして複数のカラーバリエーションが用意されています。
属している項目数を表示させるかどうか、引数に指定するだけで変更できます。

クリックイベントで開閉

1. graphite
2. grey
3. blue

ホバーイベントで開閉

1. black
2. clean
3. blue

参考サイト　⇒　Design Chemical Lab

前回はナビゲーションを横配置した場合のに、
二階層目以降を解体表示する方法でしたが、
今回はナビゲーションを縦配置する場合です。

1. 左配置
2. 右配置
3. 左配置（スライドイン）
4. 右配置（スライドイン）

参考サイト　⇒　Design Chemical Lab

グローバルナビゲーションを多階層式にすることで、
トップページから目的のページまで誘導する方法は、
良く使われているインターフェースです。
しかし、セレクトボックスのように解体してしまえば、
二階層まであればグローバルナビゲーションとしての役目を十分果たします。
Design Chemical Labで提供されているjQuery Mega Drop Down Menu Pluginならば、
複数のカラーバリエーションがスキンとして用意されています。

1. 基本デザイン
2. grey
3. blue
4. orange
5. red
6. green
7. light_blue
8. white
9. black

参考サイト　⇒　Design Chemical Lab