2011年9月アーカイブ

2011年9月24日

jQueryだけのアコーディオン

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

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

参考サイト ⇒ Nate Armagost

2011年9月17日

多階層式アコーディオン

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

クリックイベントで開閉

  1. graphite
  2. grey
  3. blue

ホバーイベントで開閉

  1. black
  2. clean
  3. blue

参考サイト ⇒ Design Chemical Lab

2011年9月11日

二階層で十分?(縦型)

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

  1. 左配置
  2. 右配置
  3. 左配置(スライドイン)
  4. 右配置(スライドイン)

参考サイト ⇒ Design Chemical Lab

2011年9月 4日

二階層で十分?

グローバルナビゲーションを多階層式にすることで、
トップページから目的のページまで誘導する方法は、
良く使われているインターフェースです。
しかし、セレクトボックスのように解体してしまえば、
二階層まであればグローバルナビゲーションとしての役目を十分果たします。
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

OpenID対応しています OpenIDについて

このアーカイブについて

このページには、2011年9月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2011年8月です。

次のアーカイブは2011年10月です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。