ナビゲーションの最近のブログ記事

メニューボタンをクリックしてページ遷移する前に
コンテンツに応じた内容を表示させ、
あらかじめ内容がわかるようにしておくことは。
ユーザー視点から重要なことです。
JavascriptのDOMを使いこなせれば、
自分で実装できますが、プラグイン化されており、
読み込むだけで実装できるほうが相当便利です。

使用サンプル　→　スライドショーナビ

参考サイト　⇒　desSlideshow

シンプルなスライド式ナビゲーションメニュー。
縦スライド、横スライドどちらも可能。
各コンテンツへのリンクにするだけでなく、
別サイトへリンクさせるリンク集としての使い方もある。

使用サンプル　→　メニュースライダー

参考サイト　⇒　Design Chemical Lab

トップページを印象付けるために、ナビゲーションは重要です。
このプラグインは、多数のプロパティが用意されており、
プラグインの実行時に引数で指定するだけで簡単に実装できるのがメリットです。

1. Show/hide
2. Fade
3. Sequential fade
4. Side slide
5. Side slide (bounce)
6. Sequential slide
7. Up/down
8. Sequential up/down
9. Alternating up/down
10. Alternating up/down (2)
11. Seq. alt. up/down

参考サイト　⇒　Sliding Background Image Menu with jQuery

グリッドスタイルできれいに表示させ、
プロパティを指定するだけで表示効果を切り替えられる。
シンプルな方法からフェード効果など簡単に実装可能。

1. スタンダード
2. フェード
3. 順次フェード
4. ムーブ＋フェード
5. 順次ムーブ＋フェード
6. 順次ムーブ＋フェード（反転）
7. リサイズ
8. 分散
9. 行切り替え
10. 順次ムーブ＋フェード（３行）

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

クリックイベントで開閉

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

WEBサイト全体のナビゲーションをシンプルにまとめることはとても重要ですが、
WEBサイトの規模が大きい場合、一つのメニューから何階層にも入り組んだ構成になることがあります。
ドロップダウンメニューを使えばトップページに限らず、
どのページからどのページへも１クリックのみで移動できるようになります。
aMenuプラグインを使えば、リストタグを入れ子にするだけで何階層でもドロップダウンメニューに出来るすぐれもの。
４つの効果も選べ、表示させるスピードも設定できます。

1. show
2. fade
3. slide
4. wind
5. speed

参考サイト　⇒　aMenu

載せたい項目数が多い場合、リスト化すると縦方向に長くなり、
スクロール量の多いページになりがちです。
いっそのこと、マウスのスクロールと同時にメニューもスクロールさせてしまえば、
ユーザーの操作は少なくなります。
webkit系のブラウザ(Safari、Chrome)を使えば、
上下にぼかし効果が入って、よりリアルに感じられます。

使用サンプル　→　スクロールするメニュー

参考サイト　→　MoveUpMenu

ロールオーバー効果を使って、
ユーザーにとって分かりやすいナビゲーションを作ることは
現在のWEBサイトの必須要素といえます。
ロールオーバー効果を実装するには、いろんな方法がありますが、
ページごとにハイライト表示させるには、手作業で管理することが多くなります。
しかし、yuga.jsプラグインを使えば、Javascriptファイルを読み込んで、
特定のClass名を指定するだけでハイライト付きの
ロールオーバーナビゲーションを作れます。
ただし、ハイライトしているボタンにマウスオーバーしても変化はしません。

使用サンプル　→　ハイライト付きナビゲーション

また、thickboxプラグインを読み込んでおけば、
画像に直接リンクを貼るだけで、thickbox表示できます。

参考サイト　→　yuga.js