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

2012年1月14日

オートスライドのナビゲーションメニュー

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

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

参考サイト ⇒ desSlideshow

2012年1月 7日

縦横にスライド可能なメニュー

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

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

参考サイト ⇒ Design Chemical Lab

2011年11月26日

ナビゲーションメニューにも工夫を

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

  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

2011年10月16日

グリッドレイアウトのナビゲーション

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

  1. スタンダード
  2. フェード
  3. 順次フェード
  4. ムーブ+フェード
  5. 順次ムーブ+フェード
  6. 順次ムーブ+フェード(反転)
  7. リサイズ
  8. 分散
  9. 行切り替え
  10. 順次ムーブ+フェード(3行)
参考サイト ⇒ Grid Navigation Effects

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

2011年8月21日

何階層でも楽々追加

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

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

参考サイト ⇒ aMenu

 

2011年6月19日

メニューが追いかけてくる!

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

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

参考サイト → MoveUpMenu

2011年6月 4日

ハイライト付きナビゲーション

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

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

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

参考サイト → yuga.js


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

このアーカイブについて

このページには、過去に書かれたブログ記事のうちナビゲーションカテゴリに属しているものが含まれています。

前のカテゴリはツールチップです。

次のカテゴリはレイアウトです。

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