flyoutメニューの微調整についてのメモ

2011年05月14日 13:51

flyingjunk.NETに組み込んだフライアウトメニューのカスタマイズについてのメモ。

Wayfinderに同梱されている"css-play.flyout.config.php"をベースに、"pastelflow-flyout.config.php"という名前でコピー&リネームして使っている。
"css-play.flyout.config.php"と組み合わせて使うスタイルシートファイルがexamples/cssplayディレクトリに収録されているので、こちらもコピー&リネームし、パスを修正しておく。

フライアウトメニューの出力例

flyingjunk.NETのflyout形式メニュー

収録サンプルそのままだと、メニューの文字サイズやメニュー幅、背景色がflyingjunk.NETにマッチしないので、スタイルシートで調整。
さらに第二段階して次のような調整を行ってみた。
下位ページで出力するメニューアイテムの調整

元のメニューは&startId=`0`で、サイトの全メニューを出力していたので、コンフィギュレーションをflyout用に書き換えるだけでは、すべてのページで第一レベルのアイテムが表示される。

これではカレントページがどのレベルなのかわかりにくい気がしたので(いちおうパンくずリストは設けてあるが)、下位ページを表示しているときは、同グループ内の兄弟アイテムだけをメニューに表示するようにしてみた。

ただし、実際に変更した結果、あまり改善されていない気がしたため、続いて親アイテムのメニュー項目を見出し兼リンクとして表示してみることにした。

兄弟アイテム(メニューの第三階層)+親アイテムの表示例
出力アイテムの修正例

スニペットコール
どのレベルでも兄弟アイテムだけを表示するためには、&startIdが常にカレントページの親アイテムとなるように[*parent*]を使って指定する。

[!Wayfinder &startId=`[*parent*]` &config=`pastelflow-flyout` !]




さらに親アイテムを表示させるために次のようにパラメータを追加。

[!Wayfinder? &startId=`[*parent*]`
&config=`pastelflow-flyout` &displayStart=`true` !]




これで親アイテムが表示されるが、そのままではリンクがないただの見出しなので、"pastelflow-flyout.config.php"に親アイテム表示用のテンプレートを書き加えた。

$startItemTpl = '@CODE:<h2 class="hide active"><a href="[+wf.link+]">[+wf.linktext+]</a></h2>[+wf.wrapper+]';



デフォルトテンプレートでは、見出しをh2要素としてlinktextを出力しているようなので、そこへa要素を加えて、リンクとして機能するようにしている。
末尾の[+wf.wrapper+]は親アイテムに続いて本体のメニューアイテムを出力するために必要。これがないと親アイテムのみの出力になってしまい、肝心の兄弟アイテムが表示されない。


スポンサーサイト


コメント

    コメントの投稿

    (コメント編集・削除に必要)
    (管理者にだけ表示を許可する)

    トラックバック

    この記事のトラックバックURL
    http://flyingjunk.blog25.fc2.com/tb.php/362-a777d6f8
    この記事へのトラックバック


    最近の記事

    オンラインアルバム