デモサイトのヘッダ部
サンプルデモサイトのヘッダ部の右上には文字サイズを制御する別のツリー構造、左上にはツリー状の別のサブメニュー情報(メインメニューとは異なる)、その他の部分には個別のリンク情報を紐付けています。
この文字サイズ制御やサブメニューは別途作成したツリー情報で、ヘッダの配置ツリーの一部にあたかも部品のように紐付ける設定をしています。これは別の位置に移動させることも、定義データ次第となります。
(ヘッダ部の説明ですが、画像の下側付近に横並びとなっているのはメニュー部(メインメニュー)です)
まだ作成していませんが、最近よく見かける、ヘッダ部に自動スライドするバナーを、配置ツリーの上下左右の真ん中位置に作成することを検討していますが、そのような発想を組み込むことも可能です。
デモサイトのメニュー部
前述のヘッダ部説明の画像の下側にも写っていますが、横並びで表示されているのがメインメニューです。
デモサイトのフッタ部
フッタ部も同様に、よくある、帯状のフッタにcopyrightを掲げるようなフッタにもできます。しかし、サンプルのデモサイトでは、左側に下から上に遡る方向の展開メニュー、即ちWindowsのスタートメニューのような挙動を見せるツリー情報を配置しています。
このメニューは、第一階層にメインメニューと同じ内容を配置し、第二・第三階層にページ内リンク(ページ内ジャンプ用)を配置したもので、現在のページと異なる場合は、そのままページ遷移しますが、同じページ内のリンクの場合は、メニューは閉じないままでページ内スクロールで該当位置に移動する、という少し面白い動きをします。
このような挙動と記事内容ごとに分かれた詳細なリンク情報が網羅されたメニューであるため、この起動ボタン(リンク)には「サイトマップ」という名称を付けています。
このメニュー機能は、ヘッダ部と同様に「ツリー構造情報」としてのサイトマップ用のツリー情報をデータ登録するほかに、「表示させる形」として、JavaScriptやCSSが組み込んであり、その関連性をDBで紐付ける、ということで実現しています。