Navigation Menu

ナビゲーションメニュー

現在のWebサイトでは、個人/商用サイトを問わず、 サイト共通のナビゲーションメニューが使われるケースが非常に多くなっています。 この弊社サイトでの、ページ上部のTop,WebJADE,Demoと並ぶリンク群がナビゲーションメニューとなります。

あるページにそれと関連するページへのリンクを設置しただけの場合や、ページの一覧的なサイトマップよりも、 ナビゲーションメニューの利用では、個々のページへのアクセスが容易になり、 さらにサイト全体の構成をユーザーに知らせ、目的とするページ以外に興味を持たせる事にも役立ちます。 また、サイト全体のメニューとは別に、あるテーマに関するページを集めたメニューなど、 サイト内で複数のナビゲーションメニューが利用される場合もあります。

リンクを並べただけのシンプルなメニューだけでも有効に機能しますが、 そのリンクに関連するページ群をサブメニューとして表示するような、多階層構成のメニューも頻繁に使われます。 ここではそのような多階層のナビゲーションメニューを実装します。

Webサイトの中での相対的な重要性

ナビゲーションメニューを利用しているWebサイトでは、かなりの割合のぺージにメニューが設置されますので、 そのサイトの中で最も頻繁に目にする要素だと言えます。 それ故、ナビゲーションメニューの機能性とデザインは、そのサイトに対する印象を左右するとも言えます。

ページ間のリンクをナビゲーションメニューメインで行う場合には、リンクが表示される事が必要とされますので、 WebJADEではJavaScriptやCSSが無効な場合でも、本来想定するデザインでは無いとはしても、メインのリンクは機能するような記述を行います。

AdobeやMicrosoftのサイトで、ナビゲーションメニューにFlashやSilverlightを敢えて使用していないというのは、 ナビゲーションメニューは、出来るだけ多くのユーザーに利用可能な状態である事が重要だという事の表れでもあります。

CSSによる実装
JavaScriptによる実装
ドロップダウンメニュー
水平方向 2列メニュー
垂直方向のフローティングメニュー
クリックによる切替とスライド効果

CSSによる実装

CSSの:hover擬似セレクタを利用

多階層メニューのDemoで記述したようなJavaScriptを使用しない実装になります。 想定通りの動作には比較的新しいブラウザ(Firefox2,IE7など)が必要になりますが、 それらのブラウザではマウスポインタに反応する多階層のメニューが利用出来ます。

またこのCSSによる実装は、本来はJavaScriptでの効果を前提とするが、JavaScriptが無効である場合にも多階層メニューとして機能させる為の保険的な用法としての価値もあります。


JavaScriptによる実装

JavaScriptを利用した効果

JavaScriptによる効果では、CSSだけでは実現出来ない、スタイル以外のプロパティの変更や時間差適用、:hover対象外エレメントに対する操作、アニメーションなどが可能になります。 また、Fragment-idやCookieを利用した設定、あるいはAjaxによる動的な情報取得も可能など、CSSのみの場合と比較すると、 格段に機能性は向上します。

このようなJavaScriptを利用したナビゲーションメニューには多数の実装例がありますが、 WebJADEでの特徴としては、ユーザー側で簡単にエフェクトのon/off切替が出来るような設定が可能ですので、 動作を軽くする為に、あるいはエフェクトを好まないユーザー向けの選択肢として活用出来ます。

DropDown型メニュー

水平方向のナビゲーションメニューです。垂直方向のメニューよりもコンテンツエリアへのレイアウト上での影響が少なくなりますので、 多くのサイトではサイト共通のメニューの場合には、水平方向のメニューが使われる傾向にあります。

サブメニューをドロップダウン形式で実装します。 ドロップダウン形式の場合には、サブメニューをフローティングとして設定しますので、 サブメニュー表示時でも他のコンテンツエリアのレイアウトに影響しない為(サブメニューが他のコンテンツの上に描画される)、 水平方向メニューにおいて最も一般的に利用されるサブメニュー形式となります。

2段階メニュー

水平方向のナビゲーションメニューにおいて、サブメニューを表示する為のエリアを固定枠として用意します。 上記のDropDownとの併用での多階層メニューも可能です。

この形式では、DropDownよりも表示出来る情報量は少なくなりますが、サブメニュー項目を常時表示する事が出来るというのが特徴ですので、 現在のページと関連の高いリンク群を強調したい場合に有効な形式となります。


垂直方向メニュー Floating

垂直方向のナビゲーションメニューは、水平方向のメニューよりもレイアウト上での制限と影響は大きくなりますが、 その分目立ち、ページをある程度スクロールしても表示される為、より利用し易い形式となります。 この為、サイト全体のナビゲーションメニューとは別に、あるテーマに基づくページ群のメニューとして設置する用途に向いていると言えます。

垂直方向のメニューでも、水平方向メニューのドロップダウン形式と同様に、 サブメニュー表示にはレイアウトへの影響が少ないフローティングのメニューが使われるケースが多くなります。


マウスクリックによる切替 Slide

サブメニュー表示をマウスクリックによる切替として実装します。 前記のナビゲーションメニューサンプルでは全てマウスポインタによる表示切替としていましたが、 今回のようなレイアウト上での影響が大きい場合には、過剰に反応する事が無いようにマウスクリックによる表示切替としています。

マウスクリックによる切替がマウスポインタ移動による切替と大きく異なる点は、 サブメニュー表示切替をマウスクリックで行う為、メインメニュー項目にクリックにより移動する通常のハイパーリンクが利用出来ない点にあります。 よって本来メインメニューに設定するリンクをサブメニュー内に設けるなどの対応が必要となります。 同時にJavaScriptやCSSが利用不可な状況の為に、通常通りメインメニューにリンクを設定する事も望まれます。

このスライド形式のメニューでは、水平方向メニューの2段階表示と同様に、一度表示状態にすればその状態が継続しますので、 フローティング形式よりもサブメニュー項目をより注目させる効果があります。


WebJADE
Copyright © 2006-2008 distraid Inc. All rights reserved.