カレントページのメニューアイテムをより判りやすくする

2011年05月15日 13:48

flyingjunk.NETのフライアウトメニューをさらに修正。

現在表示しているページがさらに判りやすくなるように、表示中のページについてはメニューアイテムの文字をグレーにして、リンクも適用しないように変更した。
[カレントページのメニューアイテムをより判りやすくする]の続きを読む
スポンサーサイト

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にマッチしないので、スタイルシートで調整。
さらに第二段階して次のような調整を行ってみた。
[flyoutメニューの微調整についてのメモ]の続きを読む

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

2011年05月13日 19:31

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

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

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


[flyout型メニューを組み込んでみる]の続きを読む

画像を使ったメニュー

2011年02月14日 11:26

flyingjunk.NETのホームページ上にある仕事紹介用画像はこれまで単なる画像だったので、ボタンとして動作するようにWayfinderのスニペットコールに置き換えた。
[画像を使ったメニュー]の続きを読む

Wayfinder configファイルの動作例

2011年02月13日 00:24

Wayfinderに同梱されているconfigファイルがどのよう動作するかを確認するため、flyingjunk.NETに組み込んでみた。

CSSファイルは付属のものをそのまま使っているので、メニュー項目の幅が足りなかったり隙間が空いたりと変なところが多いが、基本的な動作は確認できる。

Wayfinderの出力例


スニペットコールに&configパラメータを書くだけで簡単に動的メニューが作れるのは便利です。
サンプルページをあっという間に作ってしまえるMODxのシステムもさすが。


ひととおり仕組みをチェックしたら、"almost Complete Guide~"の事例を見ながらアコーディオン型メニューの作り方を学ぶ予定。




最近の記事

オンラインアルバム