navigation_001

navigation_001a

navigation_001b

メニューを使ったディレクトリ内のページインデックス

 
任意のディレクトリ(BiNDで言うコーナー)の中にある複数ページのインデックスをページの上部に置く提案ブロック。
ディレクトリ内のメニューはこれまでサブメニュー的にサイドバーなどに置くことが多かったと思いますが、最近はシングルカラム(サイドバーのないレイアウト)が多くなっており、またサイドバーはスマホではメインコンテンツの下に表示されることになるため、ページを見終わるまでメニューが現れないとこになってしまいます。
それを解消するためにも、ページの冒頭(ビルボード直下など)にナビゲーションを置くことを提案しています。
 
任意のディレクトリ内にある複数のページに置くため、名前をつけて共有として設定することが管理しやすいでしょう。
その時、今見ているページがわかるようにしたいと考えたとき、通常のリンクとCSSの組み合わせでは対応できません。それを解決する方法がDRESSでの管理です。DRESSには現在地という項目が設定できるので上記のように今見ているページのタブ(項目)だけを変えてわかるようにできます。
 
現在地のタブのみ下の線をなしにすることで、メニューから下のタブのようなイメージにしたパターン。現在地以外のリンクは下線あり・背景グレーとすることで区別できるようにしています。また、スマホでは各項目が縦に並ぶように設定しています。
 
項目数、線の色・太さ、項目内の余白、現在地の色や線などはDRESSから簡単に変更できます。
 
 

navigation_001a

項目数を4つにしてみたパターン。項目を4方線で囲むスタイルでボタンのような形状としています。現在地を目立つ色としています。
 

navigation_001b

太い下線に特徴的な色(ブランドカラーなど)を指定したパターン。パソコンでは下線が太くマウスオーバーで色が変わる対象としていますが、スマホでは縦に並ぶリンクの左線が対象に変わっています。