flyout型メニューを組み込んでみる

スポンサーサイト

--年--月--日 --:--

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

カテゴリー: スポンサー広告

flyingjunk.NETのメニューを、Wayfinderに収録されているサンプルのひとつ"cssplay-flyout.config.php"を使って出力するように書き換えてみた。

名前の通り、サブメニューがフライアウト形式で表示されるので、サイト自体のページ構成とどの程度マッチングするかしばらくテストする予定。

5月13日現在、テンプレートはサンプルで収録されているものをそのまま使い、メニューの文字サイズや背景色などはスタイルシートで簡単に調整を行っている。使い勝手に問題がなければ、さらにCSSをチューニングして、そのまま使い続けようかとも考えている（将来的にはアコーディオン型のメニューを自作してみるつもり）。

参考のためメニューの使用例について紹介。

Wayfinderのconfigsディレクトリ内に"cssplay-flyout.config.php"というメニュー出力用コンフィギュレーションファイルがある。このメニューをレイアウトするためのスタイルシートはexamples/cssplay内の、flyoout.cssとflyout_ie.cssのふたつ。

この3つのファイルをそれぞれコピー～ペーストからリネームしてオリジナルファイルは保存しておく。
リネームしたファイルはそれぞれディレクトリ構成そのままにサーバーにアップロード。

続いて、MODxの管理画面からテンプレート編集画面に進み、関連するテンプレート（flyingjunk.NETでは計4つ）のメニュー出力箇所でコンフィギュレーションファイルを設定しているパラメータを書き換えるだけ。

flyingjunk.NETでは、Wayfinderのスニペットコール内で各テンプレートやパラメータを直接指定するのではなく、コンフィギュレーションファイルを使っている。

実際に書き換えた内容は次のようになる。

a.元のスニペットコール
[!Wayfinder? &startId=`0` &config=`navigation` !]

b.新しいスニペットコール
[!Wayfinder? &startId=`0` &config=`pastelflow-flyout` !]

太字部分がコンフィギュレーションファイル名。ファイル名は任意につけることができる。"pastelflow"というのは現在サイトで使用している自作テンプレートの名称でそれに合わせたコンフィギュレーション名にしている。