階層が深い場合のナビゲーションにおいて、４階層辺りまで来るとパンくずナビゲーションのみに頼るサイトも多いようです。自分としては現在地の確認や階層の確認が、どうも視覚的にイマイチな気がします。なにか良い表示方法をしているサイトをご存じないでしょうか？宜しくお願いいたします。

ＵＦＪのサイトは三和銀行時代のものを踏襲していますが、ナビゲーションに関しては評価が高いようです。

FLASH制御なら

あたりはいかがでしょう？３Dで奥に向かって進むようなナビゲーションです。それから中村勇吾氏によるサイトでは色々試験的な試みがあって、

の2002年左から二つ目のナビゲーションはいくらでも深く掘り込めます。

ただし、いまどきのテキストベースサイトにはいずれも合致していませんね。参考にならなければノーポイントで結構です。

度々ですが、エレベータのように深く掘り下げるイメージの、こちらも３Ｄライクなナビゲーションを持っているサイトです。あばら骨のように背骨コンテンツを軸に2階層・3階層・4階層と垂直に深く掘り下げて、階層内コンテンツは左右水平に移動する方式のナビゲーションです。

画面左下のモーフィングボタンがサイトマップとなったりしています。

こちらもご参考まで。

マッチしていなければノーポイントＯＫです。

FLASHは一般的なUAに対して非常に有効な手段ではありますが、来訪者全員がFLASHを使えるとは限らない(*1)以上テキスト(+CSS)が最適と個人的には考えております。

最も端的にナビゲーションを表すのはHTMLに於けるLINK要素です。

これはサイト内の構造を明示する事が出来ます。

残念な事にIEは未対応(正確にはstylesheetの読み込みにのみ対応)ですが、Mozilla1.1以降(だったと思う)やOpera7以降、iCabやSafari、Lynxなど最近では多くのUAがLINK要素の存在するサイトに対してナビゲーションを表示する事が可能になっています。

尚、参考までに申し上げますとIEでも拡張する事によってナビバーを表示させる事は可能です。

例えば「ス切リボ(

)」などがあります。

LINK要素によってトップページや索引、目次、章の区切り

、著作権情報のページ等々へのリンクを論理的に記述する事が可能です。

これは是非とも記述しておくべきです。

LINK要素に関しては以下のサイトを参考にしてみてください。

また以下のサイトでどの様に表示されるものなのかが画像を用いて紹介されています。

とはいえ大多数を占めるIEに対して無力ですし、全ての構造を表示する事は不可能ですのでCSSに頼る事にしたいと思います。

構造を表す以上ol要素(順序付きリスト)、若しくはul要素(順序無しリスト)で書いてゆくことになります。

階層が深くなるごとにolやulをネストさせてゆけばよいわけです。

そしてそれらのolやulをdisplay:noneを指定して非表示とし、

その親要素であるli要素(リスト項目)に対して:hoverな時(マウスが上に乗っている)はdisplay:blockとなるようにすればマウスの乗っているときだけ下の階層のナビが表示されるという処理が実現します。

…といってもあまり具体的に想像がつかないことと思いますので以下のサイトへ行って具体例をご覧下さい。

日本語でまとめられたサイトもあるはずなのですがどこにあったかさっぱり忘れてしまいました。

英語ページですがご勘弁下さい。

一応デザイン的なものは感じ取ってもらえると思います。

なお、ナビゲーションのデザインに関してはCSSによって全てを制御する事が可能である事を一応付け加えておきます。

CSSに関しては次のサイトが詳しいです。

この方法はいかなる環境においても階層的にナビゲーションを伝える事が出来るという点において優れています。

が、古いUAはCSSの実装が甘く、正常に表示されない場合もあるようです。

また音声系ブラウザに対してはそれ相応のCSSを準備しておく必要があるかもしれません。

また、XHTML2.0という新しい仕様ではnl要素という「ナビゲーションリストを明示する要素」が誕生しそうです。

将来的にはこれでナビゲーションを明示することとなってゆくでしょう。

大分横道に逸れた部分もありましたが、参考になりましたら幸いです。

(*1)例えば次のような場合が考えられます。

・FLASHプラグインを入れていなかったり、JS機能を無効にして閲覧している人々

・テキスト系ブラウザ(w3mやLynxとか)を利用している人々

・点字表示をするブラウザ、音声系のブラウザ等に対してFLASHは無力です。