• 2010年5月 4日(火) 22:39 JST
  • 投稿者:
    augebang
  • 閲覧数
    2,162

Navman 0.1.1（デザイン）

ナビゲーションメニューをオリジナルデザインへ変更。

デフォルトで３種類のデザインが用意されているがオリジナルデザインを適用させたい場合は元のデザインを参考にCSSで変更するか、Izz menuやCSS menu builderなどで制作もしくはナビゲーションメニューテンプレートを使う。

制作の流れ。

  1. Geeklogサイト / navman / templates / のdefaultはオリジナルとして残す。
  2. コンフィグレーションのナビゲーション項目「テーマのテンプレートを使う」を「はい」にする。
  3. テーマにnavmanフォルダを新規作成しその中にdefaultをコピーする。
    テーマにnavmanフォルダを新規作成しその中にGeeklogサイト/navman/templatesのtemplatesの中のファイルをコピーする。（2010/5/10修正）
  4. 使用テーマのナビゲーション部分をに書き換える。
  5. テーマにコピーしたdefaultのファイルを書き換える。

ナビゲーションメニューの構造。

navimenu.thtml



menuitem.thtml

    • 多階層メニューの場合
    menuitem_drop.thtml





    • 考え方としては「navimenu.thtml」の中に「menuitem.thtml」か「menuitem_drop.thtml」が読み込まれる形になる。

      ←「navimenu.thtml」
    • ←「menuitem.thtml」もしくは「menuitem_drop.thtml」

    上記のようにごく一般的な

    • のリスト構造。
      使われているテンプレート変数についてはNavigation Manager readme_ja.htmlの９）テンプレートを参照。

      [tag:アドオン備忘録 ]

    関連情報

    トラックバック

    このエントリのトラックバックURL:
    http://gltmatrix.com/trackback.php/navimanplugindesign

    この記事にはトラックバック・コメントがありません。

    サイト管理者はコメントに関する責任を負いません。

    • Navman 0.1.1のテーマ毎のデザインの作成方法について
    • 投稿者:ゲストユーザー  2010年5月 9日(日) 23:39 JST

    こんにちは

    navmanを利用して横のブロックのメニューを階層表示させていますが、この度PTbookLCRsr2を利用させて頂こうと思っています。
    navmanがテーマ毎にデザインを作成できると知りましたので試行錯誤しているのですがうまく設定することができません。

    手順どおりコンフィギュレーションを変更してlayout/PTbookLCRsr2ディレクトリにnavmanディレクトリを作成し、defaultの中身をコピーしました。
    そうしたところ、横に表示させていたメニューブロックそのものが消えてしまいましたが、もう少し具体的に教えて頂けないでしょうか？

    よろしくお願いいたします。

    • Navman 0.1.1のテーマ毎のデザインの作成方法について
    • 投稿者:augebang  2010年5月10日(月) 12:51 JST

    こんにちはゲストさん、コメントありがとうございます。

    まず最初に、申し訳ありません、内容に不備がありました。

    テーマに新規作成したnavmanフォルダにコピーするのは
    Geeklogサイト/navman/templatesのtemplatesの中のファイルです。
    defaultだけでもナビゲーションメニューそのものは表示されるのですがそのテーマで管理者専用メニューのナビゲーションページが表示されなくなります。

    上記を踏まえてナビゲーションメニューが表示されないのは
    PTbookLCRsr2に{header_navigation}を書き忘れている可能性があります。

          <!-- #navigation { -->
          <!-- グローバルナビゲーションコンテナ -->
          <div id="navigation">
            <ul>
              {menu_elements}
           </ul>
         </div>
         <!-- } #navigation -->

    この部分を

    <!-- #navigation { -->
          <!-- グローバルナビゲーションコンテナ -->
              {header_navigation}
         <!-- } #navigation -->

    このように書き換えているかもう一度確認してみてください。

    書き加えている場合は{header_navigation}が{header-navigation}や
    {header navigation}このようになっていないか確認して見てください。

    それでも駄目な場合はまたコメントしてくださいね。

    ---
    たかが０．１％されど０．１％